Verwenden von postMessage in HTML5 zum Übertragen von Daten zwischen zwei Webseiten

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. Werfen wir einen Blick darauf, 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 sein:

//捕获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 das contentWindow-Attribut verwenden des Iframes, nicht des Knotenobjekts.

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);

Das obige Code-Snippet gibt Informationen an die Nachrichtenquelle zurück, um zu bestätigen, dass die Nachricht empfangen wurde. Im Folgenden sind einige wichtige Ereignisattribute aufgeführt:

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

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

Verwenden Sie window.postMessage

Wenn Sie wie bei vielen anderen Webtechnologien die Gültigkeit der Datenquelle nicht überprüfen, wird die Verwendung dieser Technologie sehr kompliziert. Sie sind für die Sicherheit Ihrer Anwendung verantwortlich. window.postMessage ist im Vergleich zur JavaScript-Technologie wie PHP. window.postMessage ist cool, nicht wahr?

Das Obige ist der Inhalt der Verwendung von postMessage zum Übertragen von Daten zwischen zwei Webseiten in HTML5. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn). !