Iframes with jQuery

Question

I have a script that is pure JS that 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 wanted to create a jQuery plugin, since I often use this bit of code, I tried several ways to get an iframe using jQuery:

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

Both of these seem to return the wrong type of object, which is needed to then call document.open, write, or close. Does anyone know about this solution?

Greetings

Eef

Answer 1

I use the same code that you mention in your post and do not experience any problems. Try something like this:

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

This should add your code at the beginning of the body iframe tag.

edit: in this case, the var iframe will be set to the body iframe element, which may be confusing. The contents of $ ('# contentsframe'). Contents () will refer to the entire iframe.

Answer 2

I recently wrote an application where I had to do just such things. I found frequent posts on the Internet, but no one worked for me. Here is what I ended up using to make it work.

Variables declared in the main index / frame 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 the things I needed to store the variables and access frames were used. This works pretty well and works well with jQuery. I am interested in the answers, as I would like to clean this code, 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;" >'); }