The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Inserting html content into an iframe
dush_reddy
post Mar 11 2013, 09:44 AM
Post #1





Group: Members
Posts: 2
Joined: 11-March 13
Member No.: 18,803



I was trying to insert a table dynamically when user presses a button into an iframe.I was using insertHTML method which did not workout.So i used pasteHTML method.The content is now get inserted top of the iframe. Here is the code what i wrote.....




<html>
<head>
<script type="text/javascript">
var editorDoc;
function InitEditable ()
{
var editor = document.getElementById ("editor");
editorDoc = editor.contentWindow.document;
var editorBody = editorDoc.body;

if ('spellcheck' in editorBody)
{
editorBody.spellcheck = false;
}

if ('contentEditable' in editorBody)
{
editorBody.contentEditable = true;
}
else
{ // Firefox earlier than version 3
if ('designMode' in editorDoc)
{
// turn on designMode
editorDoc.designMode = "on";
}
}
}

function editorCommand(command)
{
editorDoc.execCommand (command, false, null);
}

function addTable()
{
editorDoc.focus();
var html = '<table border="1"><tr><td>1</td></tr></table>'
var sel, range;
if (window.getSelection) {
// IE9 and non-IE
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount)
{
range = sel.getRangeAt(0);
range.deleteContents();
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(), node, lastNode;
while ( (node = el.firstChild) )
{
lastNode = frag.appendChild(node);
}
range.insertNode(frag);

// Preserve the selection
if (lastNode)
{
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if (document.selection && document.selection.type != "Control") {
// IE < 9
document.selection.createRange().pasteHTML(html);
}

}

</script>
</head>
<body onload="InitEditable ();">
<table bgcolor="red" border="1" width="65%" height="5%">
<tr><td width="5%"><img src="" onClick="editorCommand('bold')"></img></td>
<td> <img src="" onClick="addTable()"></img></td>
</tr></table>

<iframe id="editor" width="65%" height="70%">

</iframe>
<br/><br/>
<br/>

</body>
</html>



Please help me on how to get the content inside the iframe.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 11 2013, 11:10 AM
Post #2


.
********

Group: WDG Moderators
Posts: 8,422
Joined: 10-August 06
Member No.: 7



QUOTE(dush_reddy @ Mar 11 2013, 03:44 PM) *

I was trying to insert a table dynamically when user presses a button into an iframe.

I'm not good at user selections and ranges. innerHTML works for me though:

CODE
function addTable()
{
    var html = '<table border="1"><tr><td>1</td></tr></table>'
    editorDoc.body.innerHTML+=html;
}

--or do you have to use user-selected text?

Side notes:

QUOTE
I was using insertHTML method which did not workout.

Never heard of that, does it even exist?

QUOTE
So i used pasteHTML method.

That might be for IE only.

QUOTE
editorDoc.focus();

I got a script error from that (only tried with Opera12).

QUOTE

var frag = document.createDocumentFragment(), node, lastNode;

Where do node and lastNode above come from? unsure.gif

QUOTE

<img src="" onClick="editorCommand('bold')"></img>
<img src="" onClick="addTable()"></img>

The IMG elements above lack both SRC and ALT attribute values, so there's nothing to click on. Also I recall the shorter XHTML syntax:

CODE
<img ... />

is better supported than explicit </img> end tags.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
dush_reddy
post Mar 11 2013, 11:56 AM
Post #3





Group: Members
Posts: 2
Joined: 11-March 13
Member No.: 18,803



Thanks for the reply.My intent was to insert the table at the cursor position.Innerhtml would insert it at last.Image tag has no SRC and ALT attributes.Yes, but the second on would call the function which tries to insert table onclick.I am not so keen on the image display.I want the desired effect to occur rather than image sources.I was targeting IE so , didn't think of other browsers.

Is there any wrong in my script or something.I want this to work so desperately.

Regards,
dushyanth
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 11 2013, 12:40 PM
Post #4


.
********

Group: WDG Moderators
Posts: 8,422
Joined: 10-August 06
Member No.: 7



QUOTE(dush_reddy @ Mar 11 2013, 05:56 PM) *

My intent was to insert the table at the cursor position.

Just to avoid confusion: do you mean the cursor (mouse pointer), as opposed to the caret (usually a pipe "|" character that appears inside form fields or in contenteditable HTML), or perhaps a selected text section?

Note that both a caret and a text selection needs some content to focus on or highlight, but when the parent page first loads there's no framed page in the iframe where the user can do any of these things. Even if there is a framed page, you must check that the user has focused/selected content inside it.

Finally, even if you do manage to get the user's caret (or selected text) position, what if the HTML spec doesn't allow a table right there? Like http://www.quirksmode.org/dom/range_intro.html says, browsers add some minimum code to make the result valid, but in my experience the result is not always pretty.

When I've done things like this I've let the user click ordinary (not contenteditable) HTML elements, then I've inserted the new markup (e.g. a TABLE) at the closest valid position. To find the latter you need a list of allowed parent elements of both the clicked element and the element you want inserted. For example, let's say the user clicks the SPAN below:

CODE
<div>
    <p>
        <span>clicked!</span>
    </p>
</div>

Before inserting the TABLE, the script checks if SPAN is an allowed parent of TABLE. Since that's not the case, each of the SPAN's parents is checked until a valid one is found (in this case the DIV, since a P can't contain a TABLE any more than the SPAN). Only then is the TABLE inserted:

CODE
<div>
    <p>
        <span>clicked!</span>
    </p>
    <table>...</table>
</div>

You must also decide if you want to insert the TABLE before or after the DIV's other content (the P above).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 26th May 2020 - 07:35 PM