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();
There are two reliable methods to access the
document element inside an
var iframeDocument = window.frames['iframeName'].document; // or // var iframeDocument = window.frames[iframeIndex].document;
var iframeDocument = document.getElementById('iframeID').contentDocument; // or // var iframeDocument = document.getElementById('iframeID').contentWindow.document;
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:
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...
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 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?
©2020 All rights reserved.