Beim Codieren stoßen wir häufig auf die folgenden domänenübergreifenden Situationen:
1. Verschachtelung von Iframes innerhalb der Seite und Nachrichtenübermittlung mit Iframes
2. Übertragen Sie Nachrichten zwischen Seiten und mehreren Seiten
Als Reaktion auf diese problematischen domänenübergreifenden Probleme hat HTML5 speziell eine neue Funktion eingeführt: postMessage (dokumentübergreifende Nachrichtenübertragung). Wenn Sie postMessage verwenden, müssen Sie zwei Parameter übergeben: data und originUrl. Daten beziehen sich auf den Inhalt, der übergeben werden muss, aber einige Browser können nur Zeichenfolgenparameter verarbeiten. Daher serialisieren wir die Daten im Allgemeinen, dh JSON.stringify (), und originUrl bezieht sich auf die Ziel-URL und das angegebene Fenster.
Unten finden Sie ein Beispiel. Ich glaube, es wird für alle einfacher zu verstehen und zu schreiben sein.
1. Verschachtelter Iframe innerhalb der Seite
Übergeordnete Seite:
html:
<div id='parent'>Hallo Wort postMessage</div><iframe src=http://127.0.0.1:8082/index2.html id='child'></iframe>
js:
window.onload=function(){ window.frames[0].postMessage('postMessage','http://127.0.0.1:8082/index2.html')} window.addEventListener('message',function(e) { console.log(e) document.getElementById('parent').style.color=e.data})Unterseite:
html:
<div id='button' onclick='changeColor();' style=color:yellow>Informationen akzeptieren</div>
js:
window.addEventListener('message',function(e){ console.log(e) let color = document.getElementById('button').style.color window.parent.postMessage(color,'http://127.0.0.1 :8081/index.html')});function changeColor(){ let buttonColor = document.getElementById('button').style.color buttonColor='#f00' window.parent.postMessage(buttonColor,'http://127.0.0.1:8081/index.html')}Die übergeordnete Seite übergibt Nachrichten über die postMessage-Methode an den Iframe, und die untergeordnete Seite lauscht über window.addEventListener auf die Nachrichtenmethode, um den von der übergeordneten Seite übergebenen Wert abzurufen. Wie in der folgenden Abbildung dargestellt, handelt es sich bei den Daten um den von der übergeordneten Seite übergebenen Wert.
Wenn die untergeordnete Seite Nachrichten an die übergeordnete Seite überträgt, leitet sie die Nachricht auch über die postMessage-Methode weiter, anstatt den Wert über window.parent.postMessage(data,url) zu übergeben. Die übergeordnete Seite lauscht beim Abrufen des Werts auch auf das Nachrichtenereignis.
2. Leiten Sie Nachrichten zwischen mehreren Seiten weiter
Übergeordnete Seite:
html:
<div id='parent' onclick=postMessage()>Hallo Wort postMessage</div>
js:
let parent = document.getElementById('parent')function postMessage(){ let windowOpen=window.open('http://127.0.0.1:8082/index2.html','postMessage') setTimeout(function(){ windowOpen .postMessage('postMessageData','http://127.0.0.1:8082/index2.html') },1000) }Unterseite:
html:
<div id='button' onclick='changeColor();'
js:
window.addEventListener('message',function(e){ console.log(e) });Die übergeordnete Seite sendet über window.open eine Nachricht an die untergeordnete Seite, um eine weitere Seite zu öffnen, und übergibt dann den Wert an diese. Es ist zu beachten, dass Sie bei Verwendung von postMessage zum Übertragen von Werten setTimeout verwenden müssen, um die Zustellung der Nachricht zu verzögern, da das Laden der Unterseite nicht sofort abgeschlossen ist, was bedeutet, dass das Abhörereignis der Unterseite erfolgt wurde noch nicht gestartet und der Wert wird zu diesem Zeitpunkt übergeben. Er kann nicht empfangen werden.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.