web-dev-qa-db-ja.com

jQueryを使用してiframeのhtmlコンテンツを取得する

現在、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');
_
javascriptjquerydomiframe
24
Mathias Conradt

.contents（）。html（）は、iframeのhtmlコードを取得するために機能しません。以下を実行して取得できます。

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

Iframe内のすべてのhtmlが返されます。または、「html」の代わりに「body」または「head」を使用して、これらのセクションも取得できます。

50
Tim

次のようにコンテンツを取得できます

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

ただし、フレームは同じドメイン内にある必要があります http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/

7
Hemant Metalia

最初の行を次のように置き換えることをお勧めします。

  var editFrame = $('#ta_OpenCmsHtml.LargeNews_1_.Teaser_1_.0___Frame');

...および次の2番目のアラート式：

  editFrame.html()

一方、同じjqueryを実行したい場合（よりクールな、IMHO）はJavaScriptのみを使用できます。

  var editFrame = document.getElementById('ta_OpenCmsHtml.LargeNews_1_.Teaser_1_.0___Frame');
  alert(editFrame.innerHTML);
2
Nathan

FCKEditorには独自のAPIがあると思う http://cksource.com/forums/viewtopic.php?f=6&t=8368

1
Dale Burrell

以下のオプションを使用することを推奨する多くのjQueryソリューションを試した後、親タグを含む実際の_<html>_コンテンツを取得できないことがわかりました。

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

これは私にとって非常にうまく機能し、_<html>...</html>_ iframeコンテンツ全体を文字列としてフェッチできました。

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

0
Eric Kigathi

Iframe：

<iframe style="width: 100%; height: 100%;" frameborder="0" aria-describedby="cke_88" title="Rich text editor, content" src="" tabindex="-1" allowtransparency="true"/>

これからデータを取得できますiframe as：

var content=$("iframe").contents().find('body').html();
alert(content);
0
Sudhakar Singajogi