get iframe property and content

Question

Is there a way to get the iframe properties and content and be able to display it?

example: type it as Rich Text Editor on the iframe and it will be displayed as<b>Rich Text Editor</b> on some part of the page.

Rich Text Editor == <b>Rich Text Editor</b>

thank you in advance.

<html>
<head>
   <title>Rich Text Editor</title>
</head>

<script type="text/javascript">
function def()
{
    document.getElementById("textEditor").contentWindow.document.designMode="on";
    textEditor.document.open();
    textEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px;}</style></head>');
    textEditor.document.close();
    document.getElementById("fonts").selectedIndex=0;
    document.getElementById("size").selectedIndex=1;
    document.getElementById("color").selectedIndex=0;
}
function fontEdit(x,y)
{
    document.getElementById("textEditor").contentWindow.document.execCommand(x,"",y);
    textEditor.focus();
}
</script>

<body onLoad="def()">
    <center>
        <div style="width:500px; text-align:left; margin-bottom:10px ">
            <input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value="B" onClick="fontEdit('bold')" />
            <input type="button" id="italic" style="height:21px; width:21px; font-style:italic;" value="I" onClick="fontEdit('italic')" />
            <input type="button" id="underline" style="height:21px; width:21px; text-decoration:underline;" value="U" onClick="fontEdit('underline')" /> | 
            <input type="button" style="height:21px; width:21px;"value="L" onClick="fontEdit('justifyleft')" title="align left" />
            <input type="button" style="height:21px; width:21px;"value="C" onClick="fontEdit('justifycenter')" title="center" />
            <input type="button" style="height:21px; width:21px;"value="R" onClick="fontEdit('justifyright')" title="align right" /> | 
            <select id="fonts" onChange="fontEdit('fontname',this[this.selectedIndex].value)">
                <option value="Arial">Arial</option>
                <option value="Comic Sans MS">Comic Sans MS</option>
                <option value="Courier New">Courier New</option>
                <option value="Monotype Corsiva">Monotype</option>
                <option value="Tahoma">Tahoma</option>
                <option value="Times">Times</option>
            </select>
            <select id="size" onChange="fontEdit('fontsize',this[this.selectedIndex].value)">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
            <select id="color" onChange="fontEdit('ForeColor',this[this.selectedIndex].value)">
                <option value="black">-</option>
                <option style="color:red;" value="red">-</option>
                <option style="color:blue;" value="blue">-</option>
                <option style="color:green;" value="green">-</option>
                <option style="color:pink;" value="pink">-</option>
            </select> | 
            <input type="button" style="height:21px; width:21px;"value="1" onClick="fontEdit('insertorderedlist')" title="Numbered List" />
            <input type="button" style="height:21px; width:21px;"value="?" onClick="fontEdit('insertunorderedlist')" title="Bullets List" />
            <input type="button" style="height:21px; width:21px;"value="?" onClick="fontEdit('outdent')" title="Outdent" />
            <input type="button" style="height:21px; width:21px;"value="?" onClick="fontEdit('indent')" title="Indent" />
        </div>
        <iframe id="textEditor" style="width:500px; height:170px;">
        </iframe>
    </center>

</body>

Sorry, I don't undestand your question. What do you mean by `iframe` properties? HTML attributes? Please give an example of a property that would be clearly visible in the code you provided. Also, where and how do you want to display the content of the `iframe`? — jfrej, Dec 18 '12 at 10:31
@zeroSeven see also here: http://stackoverflow.com/questions/926916/how-to-get-the-bodys-content-of-an-iframe-in-javascript/11107977#11107977 — algorhythm, Dec 18 '12 at 10:47

score 1 · Accepted Answer · answered Dec 26 '12 at 18:36

add this javascript code on the head section

function showHTML () {
document.getElementById('textpad').textContent = textEditor.document.body.innerHTML;
return;
}

include these on the onload java script function

 textEditor.document.addEventListener('keyup', showHTML, false);
 textEditor.document.addEventListener('paste', showHTML, false);

last add this on the html code

<textarea id="textpad" style="width:500px;height:200px;display:block;"></textarea>

for full example, see jsFiddle

score 0 · Answer 2 · answered Dec 18 '12 at 10:45

window.frames

will return you an array of all the frames including iframes within your parent window. In your example you can do something like this.

Access your iframe, using the above command and get the data you want in some id inside iframe and fetch it. That is,

<iframe id="textEditor" style="width:500px; height:170px;">
  <div id = "testText"><b>Rich Text Editor</b></div>
</iframe>

data = window.frames[1].$('testText').innerHTML

get iframe property and content

2 Answers2