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

Dale K · Accepted Answer · 2020-05-31 20:36:10Z

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, 2020 at 20:36

Dale K

28.1k15 gold badges59 silver badges85 bronze badges

answered Jan 11, 2012 at 5:19

Tim

7,8104 gold badges32 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mathias Conradt Over a year ago

Thanks, many useful replies altogether; I edited my question and added the final solution at the bottom.

Edward Over a year ago

This works on Firefox, but not chrome. I just get <HEAD></HEAD><BODY></BODY>.

Hemant Metalia · Accepted Answer · 2012-01-11 05:20:32Z

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, 2012 at 5:20

Hemant Metalia

30.8k18 gold badges77 silver badges93 bronze badges

Comments

Nathan · Accepted Answer · 2012-01-11 05:16:55Z

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, 2012 at 5:16

answered Jan 11, 2012 at 5:11

Nathan

1,70012 silver badges15 bronze badges

1 Comment

Mathias Conradt Over a year ago

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.

Eric Kigathi · Accepted Answer · 2019-04-16 00:45:48Z

2

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

answered Apr 16, 2019 at 0:45

Eric Kigathi

2,06123 silver badges25 bronze badges

Comments

Dale K · Accepted Answer · 2012-01-11 05:10:14Z

1

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

answered Jan 11, 2012 at 5:10

Dale K

28.1k15 gold badges59 silver badges85 bronze badges

Comments

Stan S. · Accepted Answer · 2019-10-09 08:04:30Z

1

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

answered Oct 9, 2019 at 8:04

Stan S.

891 silver badge5 bronze badges

Comments

Logan Wayne · Accepted Answer · 2014-11-19 06:14:06Z

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, 2014 at 6:14

Logan Wayne

5,98716 gold badges33 silver badges50 bronze badges

answered Nov 19, 2014 at 5:20

Sudhakar Singajogi

566 bronze badges

Collectives™ on Stack Overflow

Getting the HTML content of an iframe using jQuery

7 Answers 7

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related