Wie kommuniziert man zwischen iframe und der übergeordneten Website?

Lesezeit: 4 Minuten

Wie kommuniziert man zwischen iframe und der ubergeordneten Website
Danni Fuchs

Die Website im Iframe befindet sich nicht in derselben Domäneaber beide gehören mir, und ich würde gerne zwischen ihnen kommunizieren iframe und die übergeordnete Website. Ist es möglich?

1646247726 346 Wie kommuniziert man zwischen iframe und der ubergeordneten Website
Benutzer123444555621

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

Sie müssen verwenden Dokumentübergreifendes Messaging.

Elternteil -> iFrame

Zum Beispiel im oberen Fenster:

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

und im iframe:

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

iframe -> Elternteil

Zum Beispiel im oberen Fenster:

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

und im iframe:

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

  • danke, aber leider funktioniert es nicht in älteren Browsern.

    – Danny Fuchs

    6. Februar 2012 um 13:25 Uhr

  • Im Elternteil: window.onmesage = function().... Im Iframe: window.top.postMessage('hello', '*')

    – Benutzer123444555621

    21. August 2012 um 11:51 Uhr

  • Es ist kein Fehler. Datei-URLs können sehr unsicher sein und Browser behandeln sie mit immer größerer Sorgfalt. Früher konnte man verlinken file://C:/Windows/system32/whatever auf einer Webseite und lassen Sie es direkt in den Systemordner des Benutzers zeigen. Heutzutage ignorieren Browser meistens Klicks auf solche Links. Führen Sie einen Webserver aus und greifen Sie über diesen auf Ihren Code zu, und Sie werden sehen, dass die Fehler verschwinden.

    – Stijn de Witt

    27. März 2014 um 20:46 Uhr

  • Verwenden Sie als bewährte Methode niemals das ‘*’ für Ihr Ziel. Tatsächlich sagt MDN: „Geben Sie immer einen bestimmten Zielursprung an, nicht *, wenn Sie wissen, wo sich das Dokument des anderen Fensters befinden sollte.

    – rodiwa

    29. Oktober 2015 um 8:14 Uhr

  • Wir können sogar verwenden window.frames[index] untergeordneten Rahmen zu erhalten (<iframe>, <object>, <frame>), gleichwertig getElementsByTagName("iframe")[index].contentWindow. Um das übergeordnete Fensterobjekt von IFrames zu erhalten, ist es besser, es zu verwenden window.parentals window.top stellt das oberste übergeordnete Fenster dar

    – Phönix

    8. Oktober 2017 um 5:34 Uhr


1646247726 774 Wie kommuniziert man zwischen iframe und der ubergeordneten Website
Fremder im Q

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 auf die gleiche Weise in die entgegengesetzte Richtung senden.

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

  • Hallo, muss ich dazu in derselben Domain sein?

    – Guillaume Harari

    13. Dezember 2018 um 13:07 Uhr

  • stackoverflow.com/questions/25098021/…

    – Fremder im Q

    13. Dezember 2018 um 13:33 Uhr


  • Es sollte erwähnt werden, dass dispatchEvent wird in allen gängigen Browsern unterstützt. IE9 war die erste Version, in die es kam, daher funktionieren die meisten Betriebssysteme jetzt damit. caniuse.com/#search=dispatchEvent

    – Dan Atkinson

    16. August 2019 um 12:48 Uhr


  • Ich kann mit dieser Methode nicht vom übergeordneten Element zum iframe kommunizieren.

    – Ein Van

    27. September 2019 um 8:44 Uhr

  • Dafür gibt es eine einfache Lösung von Avan und @radtek. Alles, was Sie tun müssen, ist, zuerst ein Ereignis vom Iframe an das übergeordnete Element zu senden, das das übergeordnete Element benachrichtigt, dass das Iframe geladen ist (im Wesentlichen eine „Fertigmeldung“). Das übergeordnete Element lauscht auf Nachrichten und wenn es das Ereignis „Bereit-Nachricht“ empfängt, kann es mit einer beliebigen Nachricht auf den iframe antworten, die Sie senden möchten. Auf diese Weise wird die Nachricht erst dann an den Iframe gesendet, wenn der Iframe geladen ist. Und natürlich sendet die Iframe-Seite die Nachricht erst an die übergeordnete Seite, wenn sie geladen ist.

    – Cannizid

    1. Juni 2020 um 15:11 Uhr

Wie kommuniziert man zwischen iframe und der ubergeordneten Website
jpillora

Diese Bibliothek unterstützt HTML5 postMessage und ältere 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 die Unterstützung postMessage Also schlage ich jetzt vor, nur das zu verwenden.

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

  • Mit der Einschränkung, dass IE8/9 nur Zeichenfolgen unterstützt caniuse.com/#search=postmessage (Siehe bekannte Probleme)

    – Harry

    16. November 2016 um 14:28 Uhr

  • Dies kann umgangen werden, indem Sie Ihre Ereignisobjekte in JSON codieren und auf der anderen Seite decodieren.

    – Codewandler

    11. Mai 2017 um 8:50 Uhr

Verwenden event.source.window.postMessage 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', '*')
}

Wie kommuniziert man zwischen iframe und der ubergeordneten Website
sambomartin

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

Z.B

alert(top.location.href)

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

  • Da sich der Iframe nicht in derselben Domäne befindet, kann er nicht auf sein übergeordnetes Element zugreifen.

    – Andreas Köberle

    6. Februar 2012 um 7:30 Uhr

1646247727 36 Wie kommuniziert man zwischen iframe und der ubergeordneten Website
gonzarodriguezt

Sie können auch verwenden

postMessage(message, '*');

  • Da sich der Iframe nicht in derselben Domäne befindet, kann er nicht auf sein übergeordnetes Element zugreifen.

    – Andreas Köberle

    6. Februar 2012 um 7:30 Uhr

915160cookie-checkWie kommuniziert man zwischen iframe und der übergeordneten Website?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy