JavaScript - trouble accessing DOM of dynamically generated local iframe

StackOverflow https://stackoverflow.com/questions/21158433

Question

I'm having trouble accessing the DOM of an iframe content document if I create the iframe dynamically in JavaScript rather than hard-coding it in the HTML.

I'm finding this so far testing in Mac FF26 and Safari 6. It is a local iframe document on the desktop, so there should be no cross-domain issues.

The iframe I generate appears normally in the browser window. But trying to access it with contentDocument, the body element seems to be empty.

Is this a known issue? Perhaps I'm generating my iframe in an unusual way:

var newIframe = document.createElement("iframe");
newIframe.id = "generatedIframe";
newIframe.src = "test.html";
document.body.appendChild(newIframe);
var iframeTag = document.getElementById("generatedIframe");


// the iframe will be appearing normally in the browser now


// but this fails -- innerHTML is empty string:

var iframeContent = iframeTag.contentDocument.getElementsByTagName("body")[0].innerHTML;

// same reference code works if the iframe is hard-coded in HTML instead
Était-ce utile?

La solution

In fact your problem is not the way you generated your iframe.

The iframe DOM is only available after it has been loaded.

The code behind illustrates what I mean :

In your parent window container :

<script>
    function doSomething() { alert(iframeTag.contentDocument.getElementsByTagName("body")[0].innerHTML()); }
</script>

In your iframe document

<body onload="window.parent.doSomething();"></body>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top