iframes with jQuery

Question

Hey all,

I have a script which is purely JS which takes code and inserts it into an iframe:

var html = "<p>Some <strong>HTML</strong> to insert</p>"
var iframe = document.getElementById('contentsframe');
iframe = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument;
iframe.document.open();
iframe.document.write(html);
iframe.document.close();

I was wanting to create a jQuery plugin as I am using this bit of code a lot, I have tried a few ways to get the iframe with jQuery:

var iframe = $('#contentsframe');
var iframe = $('#contentsframe').contents();

Both of these seem to return the wrong type of object that is needed to then call document.open, write or close. does anyon know the solution to this?

Cheers

Eef

Answer 1

I recently wrote an app where I had to do just this sort of thing. I found frequent posts on the internet but none quite worked for me. Here is what I ended up using that did work.

Variables I declared in the main index/frameset code.

    <script> 
        // Global Variables     
        var index = -1;
    var panes = 0;
        var panesHeight=0;
        var pageMode=1;
        var zoomLevel=-2;
    </script>
</head>
<frameset cols="150,*" border="1" bordercolor="#ffffff">
    <frame name="leftNav" src="sidebar.html">
    <frameset rows="*,80" border="1"  bordercolor="#ffffff" >
        <frame name="main" src="main.html" noresize scrolling=auto marginheight=5  marginwidth=5><frame name="pagenav" src="nav.html" noresize scrolling=no marginheight=5  marginwidth=5>
    </frameset>
</frameset>

Then used things like this I needed to store variables AND access frames. This workes quite well and worked with jQuery well. I'm interested in the responses since I'd like to clean this code up if possible.

    if (window.parent.pageMode == 1) {
        $('#left', window.parent.frames['main'].document).html('<img border="0" src="' + window.parent.pages[window.parent.index + 1].image + '" width="' +  zoom + '" onclick="if(window.parent.pageMode==1){nextPage();showPages();}" style="cursor:e-resize;" >');
    }else{ // mode 0
        $('#left', window.parent.frames['main'].document).html('<img border="0" src="' + window.parent.pages[window.parent.index + 1].image + '" width="' +  zoom + '" align="right"  onclick="if(window.parent.pageMode==0){prevPage();showPages();}" style="cursor:w-resize;" >');
        $('#right', window.parent.frames['main'].document).html('<img border="0" src="' + window.parent.pages[window.parent.index + 2].image + '" width="' + zoom + '" align="left"  onclick="if(window.parent.pageMode==0){nextPage();showPages();}" style="cursor:e-resize;" >');
    }

Answer 2

I've been using the same code as you mention in your post, and have no problem. Try something like this:

var html = "<p>Some <strong>HTML</strong> to insert</p>"
var iframe = $('#contentsframe').contents().find("body").append(html);

This should append your code at the start of the iframe's body tag.

edit: in this case the var iframe would be set to the body element of the iframe, which can be confusing. The $('#contentsframe').contents() would actually reference the entire iframe object.