web-dev-qa-db-ja.com

jQueryでドキュメントの親iframeを取得する

HTMLドキュメントを含むiframeのページがあります。その子ドキュメントからiframeのIDにアクセスする必要がありますが、jQueryでアクセスできません。本質的な構造は私のページ内でこれです：

<div id="ContainingDiv">
  <iframe id="ContainingiFrame">
   <html>
     <head></head>
     <body>
     </body>
   </html>
  </iframe>
</div>

私のjavascriptメソッドでは、jQueryセレクターを使用して<body>タグ内のすべてにアクセスできますが、サイズを変更するためにiframe要素を取得できません。私はいくつかのことを試しましたが、特にiframeが関係している場合（iframeは含まれているページと同じドメインにあります）、jQuery DOMナビゲーションの専門家ではないことは確かです。これを行う方法はありますか？

jquerydomiframeselector
10
larryq

JQueryはまったく必要ありません。親のボディオブジェクトを取得するには、次のようにします。

var parentBody = window.parent.document.body

コードを実行しているiframeと同じドメインにある場合は、それを取得したら、そのオブジェクトで通常のJavaScriptを使用できます。

window.parent.document.getElementById("ContainingiFrame").style.height = "400px";

またはjQueryを使用：

$("#ContainingiFrame", parentBody).height("400");

サンプルコードを使用して、iframe内からiframeのサイズを変更する方法に関する記事を次に示します。 http://www.pither.com/articles/2010/11/12/resize-iframe-from-within

そして、それ自体のコンテンツに基づいてiframeのサイズを変更することに関する関連する質問/回答： コンテンツに基づいてiframeのサイズを変更する

21
jfriend00

iframeから親のドキュメントにアクセスするセレクターにパラメーターを追加できます。デフォルトはドキュメントですが、次のようにコンテキストをwindow.parent.documentに変更することを妨げるものはありません。

$('#ContainingiFrame', window.parent.document).whatever();

または、セレクターの前に追加します。

window.parent.$('#ContainingiFrame').whatever();
9
Gil Zumbrunnen

Iframeに関する情報（クエリの識別子など）がない場合は、次のようにウィンドウの frameElement を使用します。

_var iframe_tag_in_parent_window = window.frameElement;
_

これでiframeタグ自体ができ、JavaScriptで直接操作できます。

プレーンJavaScriptの代わりにjQueryを使用するには、以下を使用します。

_var iframe_in_jquery = jQuery(window.frameElement, window.parent.document);
_

最初の部分（_window.frameElement_）について話しました。 2番目の部分は、jQueryが要素を見つけてラップするコンテキストです。これは、現在のウィンドウの親ドキュメントです。

たとえば、iframeタグに一意のIDがある場合、次のことができます。

_var iframe_in_jquery = jQuery(window.frameElement, window.parent.document),
    id = iframe_in_jquery.attr("id");
_

これで、JavaScriptコードが実行されているidの場合、iframeが識別子になります。

P.S. _window.frameElement_がnullまたは未定義の場合、iframeには含まれていません。

P.P.Sは、親ウィンドウでコードを実行するには、jQuery()の親インスタンスを使用する必要がある場合があることに注意してください。これはwindow.parent.jQuery(...)を使用して行われます。これは、イベントをtrigger()しようとした場合に特に当てはまります。

P.P.P.S. frameElementだけでなく_window.frameElement_を使用するようにしてください...一部のブラウザーは多少壊れており、完全修飾されていない場合は常に正しいデータにアクセスできるとは限りません（ただし、2016年にその問題は解決される可能性がありますか？）

5
Alexis Wilke

これを試して：

iframe：内の要素のサイズを変更します

$('#ContainingiFrame', window.parent.document).find('#someDiv').css('height', '200px');

または単にiframe：のサイズを変更します

$('#ContainingiFrame', window.parent.document).height('640');
1
Oscar

iframe内に要素の参照があり、その親iframeを見つける必要がある場合、特に複数のiframeがある場合は、これを見つける方法があります。

var $innerElement;//element inside iframe
var $iframeBody = $innerElement.closest('body');
var $parentIframe = $('iframe').filter(function () {
    return $(this).contents().find('body')[0] == $iframeBody[0];
});
0
Shubanker

これを試して：

$("#ContainingiFrame").contents().find("#someDiv");
0
Shankar Cabus