Getting the HTML content of an iframe using jQuery
Solution 1
.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.
Solution 2
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/
Solution 3
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);
Solution 4
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
Solution 5
I think the FCKEditor has its own API see http://cksource.com/forums/viewtopic.php?f=6&t=8368
Mathias Conradt
Cybersecurity Professional (CIAM, AppSec, DevSecOps, OSINT), Software Engineer, Open Source Enthusiast, Privacy Advocate, Tactical & Stealth Gamer, Motor Biker.
Updated on June 01, 2020Comments
-
Mathias Conradt almost 4 years
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.
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');