I have something like this:
<html> <body> <iframe id="someFrame"></iframe> </body> </html>
And I would like to use jQuery to write elements such that the full equivalent HTML would be like this:
<html> <body> <iframe id="someFrame"> <!-- inside the iframe's content --> <!-- <html><body> --> <div>A</div> <div>B</div> <div>C</div> <!-- </body></html> --> </iframe> </body> </html>
Edit: After a little more research, it seems I am looking for an IE-equivalent of the contentDocument property of an iframe. “contentDocument” is a W3C standard which FF supports, but IE does not. (surprise surprise)
You can do both, you just have to target differently:
var ifrm = document.getElementById('myIframe'); ifrm = ifrm.contentWindow || ifrm.contentDocument.document || ifrm.contentDocument; ifrm.document.open(); ifrm.document.write('Hello World!'); ifrm.document.close();
After some research, and a corroborating answer from Mike, I’ve found this is a solution:
var d = $("#someFrame").contentWindow.document; // contentWindow works in IE7 and FF d.open(); d.close(); // must open and close document object to start using it! // now start doing normal jQuery: $("body", d).append("<div>A</div><div>B</div><div>C</div>");
I am going out on a limb here and suggest that the answers proposed so far are not possible.
Your “somepage.html” (the page that loads in the iframe) needs to do two things:
- Pass some kind of object to the containing page that can be used as a bridge
- Have a function to set the HTML as you desired
So for example, somepage.html might look like this:
and the containing page might look like this:
This may appear a bit convoluted but it can be adapted in a number of directions and should work in at least IE, FF, Chrome, and probably Safari and Opera…
There are two reliable methods to access the
document element inside an
1. The window.frames property:
var iframeDocument = window.frames['iframeName'].document; // or // var iframeDocument = window.frames[iframeIndex].document;
2. The contentDocument property:
var iframeDocument = document.getElementById('iframeID').contentDocument; // or // var iframeDocument = document.getElementById('iframeID').contentWindow.document;
I have found this to be cross-browser compatible… a little crossing of previous answers and a bit of trial & error of my own. 🙂
I’m using this for a download of a report, or, if an error (message) occurs, it’s displayed in the iFrame. Most of the users will probably have the iFrame hidden, I’m using it multi-functional.
The thing is I have to clear the contents of the iFrame every time I click the report download button – the user can change parameters and it happens there are no results which then is displayed in the iFrame as a message. If there are results, the iFrame remains empty – because the code below has cleared it and the
window.open(...) method generates a
Content-Disposition: attachment;filename=... document.
var $frm = $("#reportIFrame"); var $doc = $frm.contentWindow ? $frm.contentWindow.document : $frm.contentDocument; var $body = $($doc.body); $body.html(''); // clear iFrame contents <- I'm using this... $body.append('<i>Writing into the iFrame...</i>'); // use this to write something into the iFrame window.open(Module.PATH + 'php/getReport.php' + Report.queryData, 'reportIFrame');
I do not have a browser that supports
contentDocument but I’ve coded it this way so I’m leaving it. Maybe someone has older browsers and can post compatibility confirmation/issues?