it-swarm.com.de

Wie kommuniziert man zwischen iframe und der übergeordneten Site?

Die Website im iframe befindet sich nicht in derselben Domäne, aber beide gehören mir, und ich möchte zwischen der iframe und der übergeordneten Website kommunizieren. Ist es möglich?

163
Danny Fox

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

Sie müssen dokumentübergreifende Nachrichtenübermittlung 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 von iframe an das übergeordnete Fenster senden

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

Es muss hier sein, denn angenommene Antwort von 2012

In 2018 und modernen Browsern können Sie ein benutzerdefiniertes Ereignis von 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 auch in entgegengesetzter Richtung senden.

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

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

Bearbeiten: Jetzt im Jahr 2014, IE6/7-Nutzung ist ziemlich niedrig, IE8 und vor allem Unterstützung postMessage, so dass ich jetzt vorschlagen, nur das zu verwenden.

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

14
jpillora

das window.top Eigenschaft sollte in der Lage sein zu geben, was Sie brauchen.

Z.B.

alert(top.location.href)

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

3
sambomartin