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

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

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

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

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

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

子ページ内で次のコードを使用できるようになります

parent.document.getElementById(window.name);

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;
}

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について詳しくは、こちらをご覧ください。

古い質問ですが、同じ問題があり、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要素を取得できないため、これ以上直接的な方法は見つかりませんでした。親のwindow要素に直接移動します（iframeをスキップします）。したがって、IDを使用したくない場合を除いて、それらをループすることが唯一の方法のようです。

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

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

iframeのidが設定されると、以下に示すように、内部ドキュメントからiframeにアクセスできます。

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

IE、Chrome、FFで正常に動作します。

多分ちょうど使う

window.parent

iframeに呼び出しフレーム/ウィンドウを取得します。複数の呼び出しフレームがある場合は、使用できます

window.top

これを試して、親フレームで次のような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タグにアクセスできます。

// just in case some one is searching for a solution
function get_parent_frame_dom_element(win)
{
    win = (win || window);
    var parentJQuery = window.parent.jQuery;
    var ifrms = parentJQuery("iframe.upload_iframe");
    for (var i = 0; i < ifrms.length; i++)
    {
        if (ifrms[i].contentDocument === win.document)
            return ifrms[i];
    }
    return null;
}