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?
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 Commented Feb 16, 2010 at 10:47
4 Answers
Reset to default 3It 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?
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;
}
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/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<title></title>
</head>
<body>
</body>
</html>
and load from a web server index.html and the code works!!
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;
}