Wie kommuniziere ich zwischen iframe und der übergeordneten Site?

Die Website im Iframe befindet sich nicht in derselben Domain , aber beide gehören mir, und ich möchte zwischen der iframeund der übergeordneten Site kommunizieren . Ist es möglich?

Bei verschiedenen Domänen ist es nicht möglich, Methoden aufzurufen oder direkt auf das Inhaltsdokument des Iframes zuzugreifen.

Sie müssen dokumentenübergreifendes Messaging verwenden .

Zum Beispiel im oberen Fenster:

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

und im iframe:

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

Wenn Sie eine Nachricht vom Iframe an das übergeordnete Fenster senden

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

Es muss hier sein, da akzeptierte Antwort von 2012

In 2018 und modernen Browsern können Sie ein benutzerdefiniertes Ereignis vom Iframe an das übergeordnete Fenster senden.

iframe:

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

Elternteil:

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

PS: Natürlich können Sie Ereignisse auf die gleiche Weise in die entgegengesetzte Richtung senden.

document.querySelector('#iframe_id').contentDocument.dispatchEvent(event)

Diese Bibliothek unterstützt HTML5-PostMessage- und Legacy-Browser mit Resize + Hash https://github.com/ternarylabs/porthole

Bearbeiten: Jetzt im Jahr 2014 ist die IE6 / 7-Nutzung ziemlich gering, IE8 und vor allem Unterstützung, postMessagedaher schlage ich jetzt vor, nur diese zu verwenden.

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

Die window.topUnterkunft sollte in der Lage sein, das zu geben, was Sie benötigen.

Z.B

alert(top.location.href)

Siehe http://cross-browser.com/talk/inter-frame_comm.html

Sie können auch verwenden

postMessage(message, '*');;

Verwenden Sie event.source.window.postMessagediese Option, um an den Absender zurückzusenden.

Von Iframe

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

Dann sagen die Eltern zurück.

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