So verwenden Sie postMessage zum Übertragen von Daten zwischen zwei Webseiten in H5

Dieses Mal zeige ich Ihnen, wie Sie postMessage in H5 verwenden, um Daten zwischen zwei Webseiten zu übertragen. Wie verwende ich postMessage in H5, um Daten zwischen zwei Webseiten zu übertragen? PostMessage Was sind die Vorsichtsmaßnahmen für die Datenübertragung zwischen zwei Webseiten? Hier ist ein praktischer Fall, schauen wir uns das an.

Es wird geschätzt, dass nur wenige Menschen wissen, dass es in HTML5-APIS eine window.postMessage-API gibt. Die Funktion von window.postMessage besteht darin, Programmierern das Senden von Dateninformationen zwischen zwei Fenstern/Frames über Domänen hinweg zu ermöglichen. Im Grunde ist es wie domänenübergreifendes AJAX, aber anstatt zwischen dem Browser und dem Server zu interagieren, kommuniziert es zwischen zwei Clients. Schauen wir uns an, wie window.postMessage funktioniert. Alle Browser außer IE6 und IE7 unterstützen diese Funktion.

Ende des Datenversands

Das erste, was wir tun müssen, ist, den Kommunikationsinitiator zu erstellen, der die Datenquelle „Quelle“ ist. Als Initiator können wir ein neues Fenster öffnen oder einen Iframe erstellen und Daten an das neue Fenster senden. Der Einfachheit halber senden wir sie alle 6 Sekunden und erstellen dann einen Nachrichten-Listener, der auf die Feedback-Informationen vom Zielfenster wartet .

//弹出一个新窗口   
var domain = 'http://scriptandstyle.com';   
var myPopup = window.open(domain    
            + '/windowPostMessageListener.html','myWindow');   
  
//周期性的发送消息   
setInterval(function(){   
 var message = 'Hello!  The time is: ' + (new Date().getTime());   
 console.log('blog.local:  sending message:  ' + message);   
        //send the message and target URI   
 myPopup.postMessage(message,domain);   
},6000);   
  
//监听消息反馈   
window.addEventListener('message',function(event) {   
 if(event.origin !== 'http://scriptandstyle.com') return;   
 console.log('received response:  ',event.data);   
},false);

Hier habe ich window.addEventListener verwendet, aber das funktioniert im IE nicht, weil IE window.attachEvent verwendet. Wenn Sie den Browsertyp nicht bestimmen möchten, können Sie einige Toolbibliotheken wie jQuery oder Dojo verwenden.

Vorausgesetzt, dass Ihr Fenster normal erscheint, senden wir eine Nachricht – Sie müssen den URI angeben (ggf. müssen Sie das Protokoll, den Host, die Portnummer usw. angeben) und der Nachrichtenempfänger muss dies tun sich an diesem angegebenen URI befinden. Wenn das Zielfenster ersetzt wird, wird die Nachricht nicht gesendet.

Wir haben außerdem einen Event-Listener erstellt, um Feedback-Informationen zu erhalten. Eines ist äußerst wichtig: Sie müssen den URI der Nachrichtenquelle überprüfen! Sie können Nachrichten der Zielpartei nur dann verarbeiten, wenn diese legitim ist.

Wenn Sie einen Iframe verwenden, sollte der Code wie folgt geschrieben werden:

//捕获iframe   
var domain = 'http://scriptandstyle.com';   
var iframe = document.getElementById('myIFrame').contentWindow;   
  
//发送消息   
setInterval(function(){   
 var message = 'Hello!  The time is: ' + (new Date().getTime());   
 console.log('blog.local:  sending message:  ' + message);   
        //send the message and target URI   
 iframe.postMessage(message,domain);    
},6000);

Stellen Sie sicher, dass Sie die contentWindow-Eigenschaft des Iframes verwenden, nicht das Knotenobjekt.

Datenempfangsende

Was wir als Nächstes entwickeln möchten, ist die Datenempfangsendseite. Im Empfängerfenster gibt es einen Ereignis-Listener, der auf das Ereignis „Nachricht“ wartet. Ebenso müssen Sie auch die Adresse der Quelle der Nachricht überprüfen. Nachrichten können von jeder Adresse stammen. Stellen Sie sicher, dass die verarbeitete Nachricht von einer vertrauenswürdigen Adresse stammt.

//响应事件   
window.addEventListener('message',function(event) {   
 if(event.origin !== 'http://davidwalsh.name') return;   
 console.log('message received:  ' + event.data,event);   
 event.source.postMessage('holla back youngin!',event.origin);   
},false);

Der obige Codeausschnitt soll Informationen an die Nachrichtenquelle zurückmelden, um zu bestätigen, dass die Nachricht empfangen wurde. Im Folgenden sind einige wichtige Ereignisattribute aufgeführt:

Quelle – Nachrichtenquelle, Nachrichtensendefenster/Iframe.
Ursprung – URI der Nachrichtenquelle (kann Protokoll, Domänennamen und Port enthalten), der zur Überprüfung der Datenquelle verwendet wird.
Daten – die vom Sender an den Empfänger gesendeten Daten.

Diese drei Attribute sind Daten, die bei der Nachrichtenübertragung verwendet werden müssen.

Verwendung von window.postMessage

Wenn Sie die Gültigkeit der Datenquelle nicht überprüfen, wird die Verwendung dieser Technologie sehr gefährlich. Die Sicherheit Ihrer Anwendung erfordert Verantwortung dafür. window.postMessage ähnelt PHP in Bezug auf die JavaScript-Technologie. window.postMessage ist cool, nicht wahr?

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Detaillierte Schritte zum Erstellen einer Buchverwaltungsplattform mit vue.js

So zählen Sie die Tabellensumme im Bootstrap Die Anzahl von

So verwenden Sie JS zum Deaktivieren und Aktivieren von Schaltflächen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie postMessage zum Übertragen von Daten zwischen zwei Webseiten in H5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!