使用 jQuery 获取 iframe 的 HTML 内容 [英] Getting the HTML content of an iframe using jQuery

问题描述

我目前正在尝试稍微自定义 OpenCms(基于 Java 的开源 CMS)，它使用嵌入式 FCKEditor，这是我尝试使用 js/jQuery 访问的内容.

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.

我尝试获取 iframe 的 html 内容，但是，作为返回总是返回 null.这是我尝试从 iframe 中获取 html 内容的方式:

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 (!!)

查看屏幕截图，我想访问的是LargeNews1/Teaser"html 部分，该部分当前包含Newsline en..."值.下面你也可以看到 Firebug 中的 html 结构.

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.

然而，$(editFrame).contents().html() 返回 null，我不知道为什么，而 $(editFrame).attr('id') 返回正确的 ID.

However, $(editFrame).contents().html() returns null and I can't figure out why, whereas $(editFrame).attr('id') returns the correct id.

iframe 内容/FCKEditor 在同一个站点/域中，没有跨站点问题.

The iframe content / FCKEditor is on the same site/domain, no cross-site issues.

iframe 的 HTML 代码位于 http://pastebin.com/hPuM7VUz

HTML code of iframe is at http://pastebin.com/hPuM7VUz

更新:

这是一个有效的解决方案:

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

推荐答案

.contents().html() 无法获取 IFRAME 的 HTML 代码.您可以执行以下操作来获取它:

.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();

这应该会为您返回 IFRAME 中的所有 HTML.或者您也可以使用body"或head"而不是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.

这篇关于使用 jQuery 获取 iframe 的 HTML 内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！