Javascript 使用 jQuery 获取 iframe 的 html 内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8814411/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting the html content of an iframe using jQuery
提问by Mathias Conradt
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.
我目前正在尝试自定义 OpenCms（基于 Java 的开源 CMS），它使用嵌入式 FCKEditor，这是我尝试使用 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:
我尝试获取 iframe 的 html 内容，但是，总是以 null 作为返回。这就是我尝试从 iframe 中获取 html 内容的方式：
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.
查看屏幕截图，我想要访问的是“LargeNews1/Teaser”html 部分，该部分当前包含值“Newsline en...”。您还可以在下面看到 Firebug 中的 html 结构。
However, $(editFrame).contents().html()returns null and I can't figure out why, whereas $(editFrame).attr('id')returns the correct id.
但是，$(editFrame).contents().html()返回 null，我不知道为什么，而$(editFrame).attr('id')返回正确的 id。
The iframe content / FCKEditor is on the same site/domain, no cross-site issues.
iframe 内容/FCKEditor 位于同一站点/域中，没有跨站点问题。
Html code of iframe is at http://pastebin.com/hPuM7VUz
iframe 的 Html 代码位于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');
回答by Tim
.contents().html() doesn't work to get the html code of an iframe. You can do the following to get it:
.contents().html() 无法获取 iframe 的 html 代码。您可以执行以下操作来获取它：
$(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.
这应该会为您返回 iframe 中的所有 html。或者您也可以使用“body”或“head”而不是“html”来获取这些部分。
回答by Hemant Metalia
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/
但框架应该在同一个域中参考http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/
回答by Eric Kigathi
After trying a number of jQuerysolutions that recommended using the option below, I discovered I was unable to get the actual <html>content including the parent tags.
在尝试了许多jQuery推荐使用以下选项的解决方案后，我发现我无法获得<html>包括父标签在内的实际内容。
$("#iframeId").contents().find("html").html()
$("#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.
这对我来说效果更好，我能够将整个<html>...</html>iframe 内容作为字符串获取。
document.getElementById('iframeId').contentWindow.document.documentElement.outerHTML
document.getElementById('iframeId').contentWindow.document.documentElement.outerHTML
回答by Nathan
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:
另一方面，如果您更喜欢在不使用 jquery（更酷，恕我直言）的情况下完成相同的操作，则只能使用 JavaScript：
var editFrame = document.getElementById('ta_OpenCmsHtml.LargeNews_1_.Teaser_1_.0___Frame');
alert(editFrame.innerHTML);
回答by Stan S.
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:
看起来 jQuery 没有提供获取 iFrame 的整个 HTML 的方法，但是由于它提供了对本机 DOM 元素的访问，因此可以使用混合方法：
$("iframe")[0].contentWindow.document.documentElement.outerHTML;
$("iframe")[0].contentWindow.document.documentElement.outerHTML;
This will return iFrame's HTML including <THTML>, <HEAD>and <BODY>.
这将返回 iFrame 的 HTML，包括<THTML>,<HEAD>和<BODY>。
回答by Dale K
I think the FCKEditor has its own API see http://cksource.com/forums/viewtopic.php?f=6&t=8368
我认为 FCKEditor 有自己的 API，请参阅http://cksource.com/forums/viewtopic.php?f=6&t=8368
回答by Sudhakar Singajogi
Your iframe:
你的 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 iframeas:
我们可以从这个iframe 中获取数据：
var content=$("iframe").contents().find('body').html();
alert(content);
