使用 jQuery 获取 iframe 的 HTML 内容答案

【问题标题】：Getting the HTML content of an iframe using jQuery使用 jQuery 获取 iframe 的 HTML 内容
【发布时间】：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');

【问题讨论】：

标签： javascript jquery dom iframe

【解决方案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

【讨论】：