web-dev-qa-db-ja.com

iframeと親サイトの間で通信する方法は？

Iframe内のWebサイト同じドメインにないが、どちらも私のものであり、iframeと親サイトの間でやり取りしたいと思います。出来ますか？

javascripthtmlajaxiframe
158
Danny Fox

異なるドメインでは、メソッドを呼び出したり、iframeのコンテンツドキュメントに直接アクセスすることはできません。

クロスドキュメントメッセージング を使用する必要があります。

たとえば、上のウィンドウで：

 myIframe.contentWindow.postMessage('hello', '*');

およびiframe内：

window.onmessage = function(e){
    if (e.data == 'hello') {
        alert('It works!');
    }
};

Iframeから親ウィンドウにメッセージを投稿する場合

window.top.postMessage('hello', '*')
262
user123444555621

2012年から受け入れられた答えなので、ここにあるに違いありません

2018年および最新のブラウザーでは、iframeから親ウィンドウにカスタムイベントを送信できます。

iframe：

var data = { foo: 'bar' }
var event = new CustomEvent('myCustomEvent', { detail: data })
window.parent.document.dispatchEvent(event)

親：

window.document.addEventListener('myCustomEvent', handleEvent, false)
function handleEvent(e) {
  console.log(e.detail) // outputs: {foo: 'bar'}
}

PS：もちろん、反対方向に同じ方法でイベントを送信できます。

document.querySelector('#iframe_id').contentDocument.dispatchEvent(event)
20
Stranger in the Q

このライブラリは、HTML5 postMessageおよびresize + hash https://github.com/ternarylabs/porthole を使用したレガシーブラウザをサポートします。

編集：2014年、IE6/7の使用率は非常に低く、IE8以上はpostMessageをサポートしているため、これを使用することをお勧めします。

https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

14
jpillora

window.topプロパティは、必要なものを提供できるはずです。

例えば。

alert(top.location.href)

http://cross-browser.com/talk/inter-frame_comm.html を参照してください

3
sambomartin