Getting the HTML content of an iframe using jQuery

Question

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

score 58 · Accepted Answer · edited May 31 '20 at 20:36

58

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

edited May 31 '20 at 20:36

Dale K

25,246
15
42
71

answered Jan 11 '12 at 05:19

Tim

7,660
3
30
33

Thanks, many useful replies altogether; I edited my question and added the final solution at the bottom. – Mathias Conradt Jan 11 '12 at 09:36
2

This works on Firefox, but not chrome. I just get . – Edward Sep 07 '16 at 21:02

score 7 · Answer 2 · answered Jan 11 '12 at 05:20

7

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/

answered Jan 11 '12 at 05:20

Hemant Metalia

29,730
18
72
91

score 2 · Answer 3 · answered Apr 16 '19 at 00:45

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

Nathan · Answer 4 · 2012-01-11T05:16:55.417

2

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

edited Jan 11 '12 at 05:16

answered Jan 11 '12 at 05:11

Nathan

1,700
12
15

jQuery doesn't play well with DIVs that have dots . in the id, and I cannot change the id of the FCKEditor component (easily) unfortunately. I will the test above suggestions and will post the resolution later, which I finally used. Thanks all. – Mathias Conradt Jan 11 '12 at 08:38

score 1 · Answer 5 · answered Oct 09 '19 at 08:04

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

score 1 · Answer 6 · answered Jan 11 '12 at 05:10

1

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

answered Jan 11 '12 at 05:10

Dale K

25,246
15
42
71

score 0 · Answer 7 · edited Nov 19 '14 at 06:14

0

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

edited Nov 19 '14 at 06:14

Logan Wayne

6,001
16
31
49

answered Nov 19 '14 at 05:20

Sudhakar Singajogi

60
6

Getting the HTML content of an iframe using jQuery

7 Answers7

Linked