javascript - iframeから親ページにアクセスして変更する（jqueryを使用）

Question

iframeから親ページにアクセスする（そして親ページを変更する）方法はありますか？

<body>
   <iframe src="frame1.html" name="frame1" height="100%"></iframe>
   <div id="test1"></div>
</body>

frame1.htmlにあり、クリックされたときにテキスト" "を<a href=..>に追加したいと思います。<h1>clicked</h1><div id="test1"></div><a href..>

ありがとう。

score 24 · Accepted Answer

子ページ (frame1.html) が親ページと同じドメインにある場合、子ウィンドウに次のようなコードを記述できます。

 $('#test1', parent.document).html('<h1>clicked</h1>');

context2 番目のパラメーターは、最初のパラメーターに一致する要素を検索する場所を提供します。ドキュメントはこちら: http://api.jquery.com/jQuery/#jQuery-selector-context

 jQuery( selector [, context ] )

したがって、コード (frame1.html) は次のようになります。

 <a href="..." 
  onclick="$('#test1', parent.document).html('<h1>clicked</h1>');">click me</a>

お役に立てれば。

score 9 · Accepted Answer

重要な注意:親と iframe の両方が同じドメインからのものである場合にのみ、内外の iframe にアクセスできます。それ以外の場合は、同じオリジンポリシーによりアクセスできません。

両方の部分に独自のドキュメントがあることに注意してください。iframe から親オブジェクトにアクセスするのは簡単です

parent.document

親からは、次のいずれかになります。

window.frames['iframeName']

(window.frames.length /*gives you the number of iframes in your document*/ )

または id で参照し、次のことを行います (サポートに注意してください!)

var iframe = document.getElementById('iframe');
var doc = iframe.contentDocument? iframe.contentDocument:iframe.contentWindow.document;

3 に答える 3