Write elements into a child iframe using Javascript or jQuery

Write elements into a child iframe using Javascript or jQuery

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:




Alternatively, any plain-old-Javascript would be fine.
Thanks.
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)

Solutions/Answers:

Solution 1:

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();

Solution 2:

After some research, and a corroborating answer from Mike, I’ve found this is a 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>");

Solution 3:

There are two reliable methods to access the document element inside an iframe:

1. The window.frames property:

var iframeDocument = window.frames['iframeName'].document; // or // var iframeDocument = window.frames[iframeIndex].document;

Demo

2. The contentDocument property:

var iframeDocument = document.getElementById('iframeID').contentDocument; // or // var iframeDocument = document.getElementById('iframeID').contentWindow.document;

Demo

Solution 4:

I am going out on a limb here and suggest that the answers proposed so far are not possible.

If this iframe actually has a src=”somepage.html” (which you ought to have indicated, and if not, what is the point of using iframe?), then I do not think Jquery can directly manipulate html across frames in all browsers. Based on my experience with this kind of thing, the containing page cannot directly call functions from or make any sort of Javascript contact with the iframe page.

Your “somepage.html” (the page that loads in the iframe) needs to do two things:

  1. Pass some kind of object to the containing page that can be used as a bridge
  2. Have a function to set the HTML as you desired

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 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…

Solution 5:

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[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 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?

References

Related:  prevent touchstart when swiping