Writing elements to a child iframe using javascript or jQuery
I have something like this:
<html> <body> <iframe id="someFrame"></iframe> </body> </html> And I would like to use jQuery to write such elements so that the full equivalent HTML would be like this:
<html> <body> <iframe id="someFrame"> <!-- inside the iframe content --> <!-- <html><body> --> <div>A</div> <div>B</div> <div>C</div> <!-- </body></html> --> </iframe> </body> </html> Alternatively, any plain-javascript would be fine.
Thank.
Change After a little research, it looks like I'm looking for the IE equivalent of the contentDocument iframe property. "contentDocument" is a W3C standard that supports FF, but IE does not. (surprise)
You can do both, you just need 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 Mike's confirmatory answer, I found this solution:
var d = $("#someFrame")[0].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 go out on a limb here and suggest that the answers so far proposed are not possible.
If this iframe really has src = "somepage.html" (which you should have specified, and if not, what is the point of using iframe?), Then I don’t think Jquery can directly manipulate html through frames in all browsers. Based on my experience with this kind of thing, the containing page cannot directly call functions or make any Javascript contacts on the iframe page.
Your "somepage.html" (the page loaded in the iframe) should do two things:
- Pass an object to the containing page, which can be used as a bridge
- You have a function to install HTML as you wish.
So, for example, somepage.html might look like this:
<html> <head> <script src="jquery.js"> </script> <script language=JavaScript> <!--// var bridge={ setHtml:function(htm) { document.body.innerHTML=htm; } } $(function() { parent.setBridge(bridge); }); //--></script> </head> <body></body> </html> and the containing page might look like this:
<html> <head> <script src="jquery.js"> </script> <script language=JavaScript> <!--// var bridge; var setBridge=function(br) { bridge=br; bridge.setHtml("<div>A</div><div>B</div><div>C</div>"); } //--> </script> </head> <body><iframe src="somepage.html"></iframe></body> </html> This may seem a bit confusing, but it can be adapted in several ways and should work at least in IE, FF, Chrome, and possibly Safari and Opera ...
There are two reliable methods for accessing a document element inside an iframe :
1. The window.frames property:
var iframeDocument = window.frames['iframeName'].document; // or // var iframeDocument = window.frames[iframeIndex].document; 2. Property contentDocument :
var iframeDocument = document.getElementById('iframeID').contentDocument; // or // var iframeDocument = document.getElementById('iframeID').contentWindow.document; I found this to be cross-browser compatible ... a slight crosshair of previous answers and some trial and error. :)
I use this to load a report, or if an error (message) occurs, it is displayed in the iFrame. Most users will probably have a hidden iFrame, I use it as a feature-rich one.
The fact is that I have to clear the contents of the iFrame every time I click the report download button - the user can change the parameters, and, sometimes, there are no results, which are then displayed in the iFrame as a message. If there are results, the iFrame remains empty - because the code below cleared it, and the window.open(...) method generates a Content-Disposition: attachment;filename=... document.
var $frm = $("#reportIFrame"); var $doc = $frm[0].contentWindow ? $frm[0].contentWindow.document : $frm[0].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 supporting contentDocument , but I encoded it in such a way as to leave it. Maybe someone has older browsers and can post compatibility / issue confirmation?