I have something like this:
And I would like to use jQuery to write elements such that the full equivalent HTML would be like this:
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>");
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 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…
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?
- Database Administration Tutorials
- Programming Tutorials & IT News
- Linux & DevOps World
- Ebook Reviews
- PES Matches, Skills & News