使用 jQuery 获取 iframe 的 HTML 内容
Posted
技术标签:
【中文标题】使用 jQuery 获取 iframe 的 HTML 内容【英文标题】：Getting the HTML content of an iframe using jQuery 【发布时间】：2012-02-07 12:31:44 【问题描述】：我目前正在尝试稍微自定义 OpenCms（基于 Java 的开源 CMS），它使用嵌入式 FCKEditor，这是我尝试使用 js / jQuery 访问的内容。
我尝试获取 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 (!!)
查看屏幕截图，我要访问的是“LargeNews1/Teaser”html 部分，该部分当前包含值“Newsline en...”。 下面还可以看到 Firebug 中的 html 结构。
但是，$(editFrame).contents().html() 返回 null，我不知道为什么，而 $(editFrame).attr('id') 返回正确的 id。
iframe 内容/FCKEditor 在同一个站点/域上，没有跨站点问题。
iframe 的 HTML 代码在http://pastebin.com/hPuM7VUz
更新：
这是一个可行的解决方案：
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');
【问题讨论】：
【参考方案1】：.contents().html() 无法获取 IFRAME 的 HTML 代码。您可以通过以下方式获取：
$(editFrame).contents().find("html").html();
这应该会为您返回 IFRAME 中的所有 HTML。或者您也可以使用“body”或“head”而不是“html”来获取这些部分。
【讨论】：
谢谢，很多有用的回复；我编辑了我的问题并在底部添加了最终解决方案。 这适用于 Firefox，但不适用于 chrome。我只是得到 .【参考方案2】：看起来 jQuery 没有提供获取 iFrame 的整个 HTML 的方法，但是由于它提供了对本地 DOM 元素的访问，因此可以使用混合方法：
$("iframe")[0].contentWindow.document.documentElement.outerHTML;
这将返回 iFrame 的 HTML，包括 <THTML>、<HEAD> 和 <BODY>。
【讨论】：
【参考方案3】：在尝试了一些推荐使用以下选项的jQuery 解决方案后，我发现我无法获得包括父标签在内的实际<html> 内容。
$("#iframeId").contents().find("html").html()
这对我来说效果更好，我能够以字符串的形式获取整个 <html>...</html> iframe 内容。
document.getElementById('iframeId').contentWindow.document.documentElement.outerHTML
【讨论】：
【参考方案4】：您的 iframe：
<iframe style="width: 100%; height: 100%;" frameborder="0" aria-describedby="cke_88" title="Rich text editor, content" src="" tabindex="-1" allowtransparency="true"/>
我们可以从这个iframe中获取数据：
var content=$("iframe").contents().find('body').html();
alert(content);
【讨论】：
【参考方案5】：你可以得到内容为
$('#iframeID').contents().find('#someID').html();
但是框架应该在同一个域中引用http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/
【讨论】：
【参考方案6】：我建议将第一行替换为：
var editFrame = $('#ta_OpenCmsHtml.LargeNews_1_.Teaser_1_.0___Frame');
...和第二个警报表达式：
editFrame.html()
另一方面，如果您希望完成相同的 w/o jquery（更酷，恕我直言）可以只使用 javascript：
var editFrame = document.getElementById('ta_OpenCmsHtml.LargeNews_1_.Teaser_1_.0___Frame');
alert(editFrame.innerHTML);
【讨论】：
jQuery 不能很好地处理带有点的 DIV。在 id 中，不幸的是，我无法（轻松）更改 FCKEditor 组件的 id。我将测试上面的建议，稍后将发布我最终使用的解决方案。谢谢大家。【参考方案7】：我认为 FCKEditor 有自己的 API 请参阅 http://cksource.com/forums/viewtopic.php?f=6&t=8368
【讨论】：
以上是关于使用 jQuery 获取 iframe 的 HTML 内容的主要内容，如果未能解决你的问题，请参考以下文章