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?
Wie kommuniziert man zwischen iframe und der übergeordneten Website?
Lesezeit: 4 Minuten
9151600cookie-checkWie kommuniziert man zwischen iframe und der übergeordneten Website?
Danni Fuchs
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/whateverauf 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>), gleichwertiggetElementsByTagName("iframe")[index].contentWindow. Um das übergeordnete Fensterobjekt von IFrames zu erhalten, ist es besser, es zu verwendenwindow.parentalswindow.topstellt das oberste übergeordnete Fenster dar– Phönix
8. Oktober 2017 um 5:34 Uhr
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
dispatchEventwird 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
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', '*')
}
sambomartin
der window.top Eigentum sollte in der Lage sein, das zu geben, was Sie brauchen.
Z.B
alert(top.location.href)
-
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
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