ansaurus

Question

Write elements into a child iframe using Javascript or jQuery

Answer 1

+1 A:

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:

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:

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

larson4 2009-06-15 20:04:32

Thanks for your answer - but I want to use this iframe to compose HTML like a rich text editor. I don't set the src attribute since it will be cleared out and re-composed from the "top" window.Also - I think it must be possible to reach into the child's DOM - see my edit in the OP.

Jeff Meatball Yang 2009-06-15 20:22:13

Is there any reason you need to use an iframe and not a div? seems like the div would be easier and less likely to break across browsers.

Jeremy Wall 2009-06-15 21:44:27

Answer 2

+3 A:

You can do both, you just have to target differently:

var ifrm = document.getElementById('myIframe');
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write('Hello World!');
ifrm.document.close();

Mike Robinson 2009-06-15 20:37:34

aha - contentWindow. I actually found that open and close are necessary to start using jquery...

Jeff Meatball Yang 2009-06-15 20:47:52

Answer 3

+2 A:

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

Jeff Meatball Yang 2009-06-15 20:52:00

Interesting. Do you know why you have to do the open and close?

Nosredna 2009-06-16 04:15:14

ansaurus

tags:

views:

answers:

Write elements into a child iframe using Javascript or jQuery

related questions