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

iframeのウェブサイトは同じドメインにありませんが、どちらも私のドメインiframeです。と親サイトの間で通信したいと考えています。出来ますか？

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

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

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

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

そしてiframeで：

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

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

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

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)

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

編集：現在2014年には、IE6 / 7の使用率はかなり低く、IE8以上がサポートされているpostMessageため、今すぐ使用することをお勧めします。

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

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

例えば

alert(top.location.href)

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

あなたも使うことができます

postMessage(message, '*');

event.source.window.postMessage送信者に送り返すために使用します。

iframeから

window.top.postMessage('I am Iframe', '*')
window.onmessage = (event) => {
    if (event.data === 'GOT_YOU_IFRAME') {
        console.log('Parent received successfully.')
    }
}

その後、親から言い返します。

window.onmessage = (event) => {
    event.source.window.postMessage('GOT_YOU_IFRAME', '*')
}