Home/ Questions/Q 5930847
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T14:36:38+00:00

Could someone help me in updating a div in a htmleditor? Its in an

  • 0

Could someone help me in updating a div in a htmleditor? Its in an iframe, so I could not do:

Ext.fly('mydiv').update('New value');

Right now I am updating the whole content with:

xtype:'textfield',
listeners:{
                keyup:{
                    fn:function(){
                        var e = this.up().down('htmleditor');
                        var v = 'some text <div id='mydiv'></div> some more text'
                        e.setValue(v);
                    }
                }
            },
xtype:'htmleditor',
...

where as I would only like to update the mydiv part only but cannot get reference to it somehow. Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If I understand correctly, the real question here is “How do I access a DIV inside an IFRAME from its parent document?”

    I haven’t used EXT JS for anything, so I don’t know its syntax. But here it is in basic JavaScript.

    First, the document in the IFRAME:

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Child Document</title>
</head>
<body>

<h1>Child Document</h1>

<div id="stuff">
This is a div with some text in it.
</div>

</body>
</html>

    And then the parent document:

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Parent Document</title>
    <style type="text/css">
     #iframe {
        width: 250px;
        height: 250px;
        border: 1px solid #CCC;
    }
    </style>
</head>
<body>

<h1>Parent Docment</h1>

<form action="" method="get">
    <p>
    <input type="button" id="get-it" value="Get It" />
    </p>
</form>

<iframe src="iframe.html" id="iframe"> </iframe>

<script type="text/javascript">
<!--
function getIt(){
    var iframe = document.getElementById("iframe");
    var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
    var stuff = innerDoc.getElementById("stuff");
    alert(stuff.innerHTML);
}

function init(){
    document.getElementById("get-it").onclick = getIt;
}

window.onload = init;

// -->
</script>

</body>
</html>

    The key is this:

    var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

    That lets you get access to the document object of the IFRAME, after which you can use it as normal.

    • 0