使用jQuery获取iframe的html内容

时间:2012-01-11 05:05:01

标签: javascript jquery dom iframe

我目前正在尝试定制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位于同一网站/域上,没有跨网站问题。

enter image description here

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

7 个答案:

答案 0 :(得分:50)

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

$(editFrame).contents().find("html").html();

那应该为你返回iframe中的所有html。或者您也可以使用“body”或“head”代替“html”来获取这些部分。

答案 1 :(得分:7)

您可以将内容视为

$('#iframeID').contents().find('#someID').html();

但框架应位于同一个域中,请参阅http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/

答案 2 :(得分:2)

我建议用第一行替换:

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

答案 3 :(得分:1)

我认为FCKEditor有自己的API,请参阅http://cksource.com/forums/viewtopic.php?f=6&t=8368

答案 4 :(得分:1)

看起来jQuery并未提供获取iFrame的整个HTML的方法,但是由于它提供了对本机DOM元素的访问,因此可以使用混合方法:

$("iframe")[0].contentWindow.document.documentElement.outerHTML;

这将返回iFrame的HTML,包括<THTML><HEAD><BODY>

答案 5 :(得分:0)

你的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);

答案 6 :(得分:0)

尝试使用下面的选项推荐了许多jQuery解决方案后,我发现我无法获得包括父标签在内的实际<html>内容。

$("#iframeId").contents().find("html").html()

这对我来说效果更好,我能够将整个<html>...</html> iframe内容作为字符串提取。

document.getElementById('iframeId').contentWindow.document.documentElement.outerHTML