Verwenden von postMessage() zur Implementierung einer Informationsübertragungsmethode zwischen domänenübergreifenden Iframe-Pages_Javascript-Fähigkeiten

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.Daten: Die zu übergebenden Daten erwähnen, dass dieser Parameter ein beliebiger Basistyp oder ein kopierbares Objekt von JavaScript sein kann. Einige Browser können dies jedoch nur Sie müssen die Methode JSON.stringify() verwenden, um Objektparameter zu serialisieren, wenn Sie Parameter übergeben. Ä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() auf der empfangenden Seite verwenden, um sie zu konvertieren zurück in Objekte.

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) {
Fall 1:
alarm(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. Herkunft: Die Quelle des Nachrichtenfensters (Protokoll + Host + Portnummer)
Die domänenübergreifende Nachrichtenzustellung kann über die postMessage()-Methode 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 und Fenstern window.parent verwenden erhalten:

window.parent.postMessage(dataJson, '*'); Wenn es von der Startseite zur Unterseite geht, muss es zum Senden mit window.frames[0] ausgetauscht werden.

Der obige Artikel verwendet postMessage (), um die Informationsübertragung zwischen domänenübergreifenden Iframe-Seiten zu realisieren. Dies ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe, dass Sie Script Home unterstützen.