web-dev-qa-db-ja.com

JavaScriptから親のIframeにアクセスする方法

私はIFrameを持っています。これは同じドメインページを呼び出します。私の問題は、私が（JavaScriptから）この呼び出されたページからこの親のIframeからいくつかの情報にアクセスしたいということです。このIframeにはどのようにしてアクセスできますか？

詳細：私はWindows環境をプログラミングしているので、これと同じように、同じページをロードできるIframeがいくつかあります。私はこのIframeを閉じるつもりです、それで私は彼の内側からどれを閉じるべきかを知る必要があります。これらのIframeへの参照を保持する配列があります。

編集：そこにiframeが動的に生成されます

javascriptiframe
153
José Leal

また、名前とIDを同じ値に設定することもできます。

<iframe id="frame1" name="frame1" src="any.html"></iframe>

それで、あなたは子ページの中で次のコードを使うことができるでしょう

parent.document.getElementById(window.name);
129
Aquatic

フレーム付きページから window.frameElement を呼び出すだけです。ページがフレーム内にない場合は、frameElementはnullになります。

もう1つの方法（ウィンドウ要素をフレーム内に入れることはそれほど簡単ではありません）が、完全を期すために：

/**
 * @param f, iframe or frame element
 * @return Window object inside the given frame
 * @effect will append f to document.body if f not yet part of the DOM
 * @see Window.frameElement
 * @usage myFrame.document = getFramedWindow(myFrame).document;
 */
function getFramedWindow(f)
{
    if(f.parentNode == null)
        f = document.body.appendChild(f);
    var w = (f.contentWindow || f.contentDocument);
    if(w && w.nodeType && w.nodeType==9)
        w = (w.defaultView || w.parentWindow);
    return w;
}
82
Ian Carter

私は postMessage API を使うことを勧めます。

あなたのiframeで、呼び出します：

window.parent.postMessage({message: 'Hello world'}, 'http://localhost/');

このページにはiframeが含まれており、このようなイベントを監視できます。

window.addEventListener('message', function(event) {
      if(event.Origin === 'http://localhost/')
      {
        alert('Received message: ' + event.data.message);
      }
      else
      {
        alert('Origin not allowed!');
      }

    }, false);

ところで、iframeだけでなく、他のウィンドウを呼び出すこともできます。

John ResigsブログのpostMessage APIについての詳細を読んでください ここ

73
Kenneth Lynne

昔の質問ですが、私はこれと同じ問題を抱えていて、iframeを取得する方法を見つけました。それは単に、親ウィンドウのframes []配列を繰り返し処理して、コードが実行されているウィンドウに対して各フレームのcontentWindowをテストすることです。例：

var arrFrames = parent.document.getElementsByTagName("IFRAME");
for (var i = 0; i < arrFrames.length; i++) {
  if (arrFrames[i].contentWindow === window) alert("yay!");
}

あるいは、jQueryを使って：

parent.$("iframe").each(function(iel, el) {
  if(el.contentWindow === window) alert("got it");
});

この方法では、各iframeにIDを割り当てる手間が省けます。動的に作成されるため、この方法が適しています。 window.parentを使用してiframe要素を取得することはできないので、もっと直接的な方法を見つけることができませんでした - それは親ウィンドウ要素に直接行きます（iframeを飛ばします）。そのため、IDを使用したくない限り、それらをループ処理することが唯一の方法のようです。

28
ingredient_15939

parentを使用して親ページにアクセスできます。関数にアクセスするためには、次のようになります。

var obj = parent.getElementById('foo');
17
kemiller2002

IframeのIDを設定すると、以下のように内部のドキュメントからiframeにアクセスできます。

var iframe = parent.document.getElementById(frameElement.id);

IE、Chrome、FFでうまく動作します。

10
Akash Kava

たぶん使うだけ

window.parent

呼び出し元のフレーム/ウィンドウを取得するためにあなたのiframeに。あなたが複数の呼び出しフレームを持っていたなら、あなたは使うことができます

window.top
6
Clawfire

これを試してみてください、あなたの親フレームであなたがこのようなIFRAMEをセットアップしてください：

<iframe id="frame1" src="inner.html#frame1"></iframe>
<iframe id="frame2" src="inner.html#frame2"></iframe>
<iframe id="frame3" src="inner.html#frame3"></iframe>

各フレームのIDは、srcのアンカーとして渡されることに注意してください。

それから、あなたの内側のHTMLでは、location.hashを通してそれがロードされているフレームのIDにアクセスすることができます。

<button onclick="alert('I am frame: ' + location.hash.substr(1))">Who Am I?</button>

そうすれば、parent.document.getElementById（）にアクセスして、iframeの内側からiframeタグにアクセスできます。

3
Mark Porter