Scripts do not execute when changing the content of an iframe with innerHTML

Question

I would like to load the content of an iframe with JavaScript. I don't want to change the src but directly the content with:

document.getElementById('frame').contentDocument.body.innerHTML = data;

It works but the JavaScript in data is not executed. Is it a security protection or I forgot something?

do your code is directly in body element? – xdevel2000 Feb 16 '10 at 10:47 — xdevel2000, Feb 16 '10 at 10:47

score 3 · Answer 1 · edited May 23 '17 at 11:44

3

It looks like the problem is not the iframe, but the fact that scripts are not executed when inserted into the DOM text with innerHTML.

You may want to check the following Stack Overflow post for a couple of solutions:

Can scripts be inserted with innerHTML?

edited May 23 '17 at 11:44

Community

1
1

answered Feb 16 '10 at 10:46

Daniel Vassallo

337,827
72
505
443

Problem is that I get a HTML page and can't modify it. – Charles Feb 16 '10 at 13:52
Your best bet is to use a JavaScript framework like jQuery to do the AJAX call. The `jQuery.ajax()` is able to evaluate JavaScript code very easily. You may want to check the following SO post for further info: http://stackoverflow.com/questions/2203762/when-loading-an-html-page-via-ajax-will-script-tags-be-loaded – Daniel Vassallo Feb 16 '10 at 14:06

score 1 · Answer 2 · edited Apr 06 '11 at 13:48

Use this for getting the document crossbrowser

//returns iframe document
function getIFrameDocument(iframe) {
    var doc;
    if (iframe.contentDocument) {//FF-Chrome
        doc = iframe.contentDocument;
    } else if (iframe.contentWindow) {
        doc = iframe.contentWindow.document;
    } else if (iframe.document) {//IE8
        doc = iframe.document;
    } else {
        doc = window.frames[iframe.id].document;
    }

    return doc;
}

score 0 · Answer 3 · answered Feb 16 '10 at 11:24

0

Try this

in a page index.html write:

<script type="text/javascript">

    function init() 
    {
        var s = document.createElement("script");

        s.innerHTML="alert('ops');"    

        document.getElementById("frame").contentDocument.getElementsByTagName("body")[0].appendChild(s);
    }

    window.onload = init;
</script>

...

<body>
    <form id="form1">
    <div>
    <iframe id="frame" src="test.html"></iframe>
    </div>
    </form>
</body>

Then simply write test.html like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

</body>
</html>

and load from a web server index.html and the code works!!

answered Feb 16 '10 at 11:24

xdevel2000

20,780
41
129
196

The problem is that I get a complete HTML page from ajax. I will get a HTML page from html to /html with javascript inside.. – Charles Feb 16 '10 at 13:50
But if you get a complete web page you shouldn't insert that in the body tag and so you should change the src property of the frame tag. – xdevel2000 Feb 17 '10 at 09:37
I make a post with ajax and get the page as reponse. – Charles Feb 17 '10 at 10:15

score 0 · Answer 4 · answered Aug 18 '10 at 08:29

Having something like the following would work.

<iframe id = "testframe" onload = populateIframe(this.id);></iframe>

// The following function should be inside a script tag

function populateIframe(id) { 

    var text = "This is a Test"
var iframe = getObj(id); 

var doc; 

if(iframe.contentDocument) { 
    doc = iframe.contentDocument; 
} else {
    doc = iframe.contentWindow.document; 
}

doc.body.innerHTML = text; 

  }

Scripts do not execute when changing the content of an iframe with innerHTML

4 Answers4