Verwenden Sie postMessage(), um Informationen zwischen domänenübergreifenden iframe-pages_javascript-Fähigkeiten zu übertragen

Wenn die Seite einen domänenübergreifenden Iframe-Link verwendet, können die Hauptseite und die Unterseite aufgrund der Einschränkungen der Webursprungsrichtlinie nicht interagieren, was zu großen Problemen bei der Übertragung von Informationen zwischen den Seiten führt Nach einer Reihe von Versuchen habe ich schließlich die folgende Methode gefunden, um dies zu erreichen:

1. Parameter der Unterseiten-URL übergeben

Um es einfach auszudrücken: Fügen Sie alle Parameter hinzu, die an die URL übergeben werden müssen, die denselben Ursprung wie die Hauptseite hat, leiten Sie die Unterseite zur URL um und dann erhält die Hauptseite diese Parameter über src des Iframes

Der Prozess ist sehr kompliziert und diese Methode wird nicht empfohlen

2. postMessage()

postMessage () ist eine von HTML5 bereitgestellte ereignisbasierte Nachrichtenübertragungs-API, die textübergreifendes Dokument-, Multi-Window- und domänenübergreifendes Messaging realisieren kann.

postMessage(data,origin)-Methode akzeptiert zwei Parameter

1.data: Die zu übergebenden Daten erwähnen, dass dieser Parameter ein beliebiger grundlegender Typ von JavaScript oder ein kopierbares Objekt sein kann. Einige Browser können dies jedoch nur Wir müssen die Methode JSON.stringify() verwenden, um Objektparameter beim Übergeben von Parametern zu serialisieren. Ähnliche Effekte können durch Verweisen auf json2.js in niedrigeren Versionen des IE erzielt werden.

2.origin: String-Parameter, der die Quelle des Zielfensters, Protokoll + Host + Portnummer [+URL] angibt, daher muss dieser Parameter aus Sicherheitsgründen nicht geschrieben werden . Nur die postMessage()-Methode Die Nachricht wird an das angegebene Fenster übergeben. Wenn Sie möchten, können Sie den Parameter natürlich auch an jedes beliebige Fenster übergeben Wenn Sie den Ursprung als aktuelles Fenster festlegen möchten, legen Sie ihn auf „/“ fest.

Nachricht senden (Unterseite)

function sendMessage(param) {
var url;
if (param.url) {
url = param.url;
};
var dataJson = JSON.stringify({　　　　 type:1,　　
a: param.c, b: param.c,
c: param.c,
url: url
});
window.parent.postMessage(dataJson, '*');
}

Da einige Browser nur String-Parameter verarbeiten können, müssen wir zuerst JSON.stringfy() verwenden, um die Parameter in Strings umzuwandeln, und dann JSON.parse() verwenden, um die Parameter beim Empfang der Seite wieder in Objekte umzuwandeln.

Nachricht empfangen

Für die von der Unterseite übergebenen Parameter können wir sie erhalten, indem wir das Nachrichtenereignis des Fensters abhören:

window.addEventListener('message', function(e) {
var data = JSON.parse(e.data);
switch (data.type) {
case 1:
alert(data.a);break;
}
}, false); 

Das Nachrichtenereignis hat mehrere wichtige Attribute

1.Daten: Wie der Name schon sagt, handelt es sich um die übergebene Nachricht

2.Quelle: das Fensterobjekt, das die Nachricht sendet

3.origin: Die Quelle des Nachrichtenfensters (Protokoll + Host + Portnummer)

Die domänenübergreifende Nachrichtenübermittlung kann über die Methode postMessage() und das Nachrichtenereignis erreicht werden. Es ist zu beachten, dass wir in der Demo Nachrichten über die untergeordnete Seite an die übergeordnete Seite übermitteln, sodass wir zum Senden window.parent verwenden und Fenster zum Empfangen :

window.parent.postMessage(dataJson, '*');

Wenn es von der Startseite zur Unterseite geht, muss es zum Senden mit window.frames[0] zum Empfangen ausgetauscht werden.

Der obige Inhalt ist die Einführung des Herausgebers in die Verwendung von postMessage (), um die Informationsübertragung zwischen domänenübergreifenden Iframe-Seiten zu realisieren. Ich hoffe, dass er für alle hilfreich ist!