CODEWITHSUNDEEP
javascriptjquerydomiframe
Mathias Conradt
Mathias Conradt

Reputation: 28665

Getting the HTML content of an iframe using jQuery

I'm currently trying to customize OpenCms (java-based open source CMS) a bit, which is using the FCKEditor embedded, which is what I'm trying access using js / jQuery.

I try to fetch the html content of the iframe, however, always getting null as a return. This is how I try to fetch the html content from the iframe:

var editFrame = document.getElementById('ta_OpenCmsHtml.LargeNews_1_.Teaser_1_.0___Frame');
alert( $(editFrame).attr('id') );         // returns the correct id
alert( $(editFrame).contents().html() );  // returns null (!!)

Looking at the screenshot, the what I want to access is the 'LargeNews1/Teaser' html section, which currently holds the values "Newsline en...". Below you can also see the html structure in Firebug.

However, $(editFrame).contents().html() returns null and I can't figure out why, whereas $(editFrame).attr('id') returns the correct id.

The iframe content / FCKEditor is on the same site/domain, no cross-site issues.

enter image description here

HTML code of iframe is at http://pastebin.com/hPuM7VUz

Updated:

Here's a solution that works:

var editArea = document.getElementById('ta_OpenCmsHtml.LargeNews_1_.Teaser_1_.0___Frame').contentWindow.document.getElementById('xEditingArea');                        
$(editArea).find('iframe:first').contents().find('html:first').find('body:first').html('some <b>new</b><br/> value');

Upvotes: 28

Views: 93556

Answers (7)

Tim
Tim

Reputation: 7780

.contents().html() doesn't work to get the HTML code of an IFRAME. You can do the following to get it:

$(editFrame).contents().find("html").html();

That should return all the HTML in the IFRAME for you. Or you can use "body" or "head" instead of "html" to get those sections too.

Upvotes: 58

Stan S.
Stan S.

Reputation: 89

Looks like jQuery doesn't provide a method to fetch the entire HTML of an iFrame, however since it provides access to the native DOM element, a hybrid approach is possible:

$("iframe")[0].contentWindow.document.documentElement.outerHTML;

This will return iFrame's HTML including <THTML>, <HEAD> and <BODY>.

Upvotes: 1

Eric Kigathi
Eric Kigathi

Reputation: 2021

After trying a number of jQuery solutions that recommended using the option below, I discovered I was unable to get the actual <html> content including the parent tags.

$("#iframeId").contents().find("html").html()

This worked much better for me and I was able to fetch the entire <html>...</html> iframe content as a string.

document.getElementById('iframeId').contentWindow.document.documentElement.outerHTML

Upvotes: 2

Sudhakar Singajogi
Sudhakar Singajogi

Reputation: 58

Your iframe:

<iframe style="width: 100%; height: 100%;" frameborder="0" aria-describedby="cke_88" title="Rich text editor, content" src="" tabindex="-1" allowtransparency="true"/>

We can get the data from this iframe as:

var content=$("iframe").contents().find('body').html();
alert(content);

Upvotes: 0

Hemant Metalia
Hemant Metalia

Reputation: 30638

you can get the content as 

$('#iframeID').contents().find('#someID').html();

but frame should be in the same domain refer http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/

Upvotes: 7

Nathan
Nathan

Reputation: 1700

I suggest replacing the first line with:

  var editFrame = $('#ta_OpenCmsHtml.LargeNews_1_.Teaser_1_.0___Frame');

...and the 2nd alert expression with:

  editFrame.html()

If, on the other hand, you prefer to accomplish the same w/o jquery (much cooler, IMHO) could use only JavaScript:

  var editFrame = document.getElementById('ta_OpenCmsHtml.LargeNews_1_.Teaser_1_.0___Frame');
  alert(editFrame.innerHTML);

Upvotes: 2

Dale K
Dale K

Reputation: 27202

I think the FCKEditor has its own API see http://cksource.com/forums/viewtopic.php?f=6&t=8368

Upvotes: 1

Related Questions