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

问题描述

我目前正在尝试自定义OpenCms（基于java的开源CMS），它使用嵌入式的FCKEditor，这正是我正在使用js / jQuery访问的。

我尝试获取iframe的html内容，但总是作为返回值为null。
这是我如何尝试从iframe中获取html内容：

  var editFrame = document.getElementById（' ta_OpenCmsHtml.LargeNews_1_.Teaser_1_.0 ___帧'）; 
 alert（$（editFrame）.attr（'id'））; //返回正确的id 
 alert（$（editFrame）.contents（）。html（））; //返回null（!!）
  

看截图，我想要访问的是LargeNews1 / Teaserhtml部分，目前持有Newsline en ...的价值。
下面你还可以看到Firebug中的html结构。

然而， $（editFrame）.contents（）。html（） 返回null，我不知道为什么，而 $（editFrame）.attr（'id'）返回正确的id。 p>

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

解决方案

.contents（）。html（）工作来获取iframe的html代码。您可以执行以下操作：

  $（editFrame）.contents（）。find（html）.html （）; 
  

应该返回iframe中的所有html。或者您可以使用body或head而不是html来获取这些部分。

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.

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

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.

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

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

Html code of iframe is at 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');

解决方案

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

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屋！