PostMessage in HTML5 implementiert eine domänenübergreifende Codeanalyse-H5-Tutorial-php.cn

PostMessage in HTML5 implementiert eine domänenübergreifende Codeanalyse

不言

Freigeben： 2018-08-08 10:51:15

Original

2328 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Codeanalyse der domänenübergreifenden Implementierung von postMessage in HTML5. Ich hoffe, dass er für Sie hilfreich ist.

Viele Leute haben halbwegs verstanden, wie man mit H5 eine domänenübergreifende Implementierung erreichen kann. Wir wissen, dass postMessage zum Senden von Nachrichten und onMessage zum Empfangen von Nachrichten verwendet wird, aber es ist nicht ganz klar, welche Methode mit window und welche mit contentWindow von iframe aufgerufen werden soll. Unten ist eine kleine Demo, die ich zur lokalen Implementierung der domänenübergreifenden Implementierung erstellt habe. Sie können dieses Beispiel von Github herunterladen. Um es auszuführen, müssen Sie zunächst die Hosts-Datei Ihres Computers finden und unter 127.0.0.1 localhost den folgenden Code hinzufügen:

127.0.0.1   localhost
127.0.0.1   main.com
127.0.0.1   A.com
127.0.0.1   B.com

Nach dem Login kopieren

Anschließend müssen Sie einen Server wie Apache usw. starten. , und legen Sie die drei von Github heruntergeladenen HTML-Dateien auf Ihrem Server ab. Schließlich müssen Sie nur http://main.com:Ihre Portnummer aufrufen, um domänenübergreifend zu kommunizieren.

Die Beziehung zwischen den drei HTML-Dateien ist wie folgt: drei Domänen: http://main.com:8090; http://b.com:8090. Die Hauptseite maindomain.html befindet sich in main.com und es gibt zwei Iframes (subAdomain.html, subBdomain.html) bzw. in a.com, b.com . Geben Sie in maindomain.html eine Nachricht in das Textfeld ein und klicken Sie auf die Schaltfläche „An IFrame senden“, um die Nachricht an den angegebenen IFrame zu senden. (subAdomain.html oder subBdomain.html), können Sie auch Nachrichten an maindomain.html in ifame senden, und gleichzeitig gibt es eine Empfangsbestätigung für den Empfang der ifame-Nachricht.

Dies sollte ein sehr häufiges Szenario sein. Legen Sie die öffentlichen Ressourcen der Website in eine bestimmte Subdomain und andere Subdomains müssen auf die Ressourcen dieser Subdomain zugreifen. Der erzielte Effekt ist wie folgt.

1. Ohne Beleginformationen:
PostMessage in HTML5 implementiert eine domänenübergreifende Codeanalyse

2. Mit Beleginformationen:
PostMessage in HTML5 implementiert eine domänenübergreifende Codeanalyse

Grundkenntnisse

Stellen Sie zunächst einige Attribute des Ereignisses im onMessage-Ereignis vor. Wenn Sie diese verstehen, können Sie mein Beispiel leichter verstehen.
* Daten: Eingehende Daten
* Herkunft: Die Domäne, in der sich das Dokument befindet, das die Nachricht sendet
* Quelle: Der Proxy des Fensterobjekts des Dokuments, das die Nachricht sendet
Wenn Sie senden möchten Senden Sie die Nachricht in der Subdomäne Domäne, in der sich Y befindet), gleichzeitig in der HTML-Datei der Subdomäne Y einfach das Fensterobjekt-Nachrichtenereignis abhören (mit onMessage). Natürlich können Sie postMessage auch in onMessage verwenden, um eine Empfangsnachricht an Subdomain X zu senden. Wir sind oft verwirrt darüber, für welches Fensterobjekt der Domäne postMessage aufgerufen werden soll.

Code

main.com

    <h1>This is the main domain</h1>
    <div style="margin:0 20px;">
        <textarea name="main" cols="80" rows="5"></textarea><br/>
        <input type="button" value="send to iframe A"/>
        <input type="button" value="send to iframe B"/>
    </div>
    <div style="float:left; margin:0 20px;">
        <h3>iframe A</h3>
        <iframe src="http://a.com:8090/subAdomain.html" frameborder="1" style="width:300px; height:300px;"></iframe>
    </div>
    <div style="float:left;">
        <h3>iframe B</h3>
        <iframe src="http://b.com:8090/subBdomain.html" frameborder="1" style="width:300px; height:300px;"></iframe>
    </div>
    <div style="float:left;">
        <h5 id="received"></h5>
    </div>
    <script>
        var received = document.querySelector(&#39;#received&#39;);
        var sendToIframeA = document.querySelectorAll(&#39;input&#39;)[0];
        var sendToIframeB = document.querySelectorAll(&#39;input&#39;)[1];
        var iframeA = document.querySelectorAll(&#39;iframe&#39;)[0];
        var iframeB = document.querySelectorAll(&#39;iframe&#39;)[1];
 
        //receive message
        function getMessage(e){
            console.log(&#39;main received!&#39;);
            received.innerHTML = &#39;Receive message from &#39; + e.origin + &#39;, the data is &#39; + e.data;
            e.source.postMessage(&#39;Received the message&#39;, e.origin);
        }
        window.addEventListener(&#39;message&#39;, getMessage, false);
 
        //post message
        sendToIframeA.addEventListener(&#39;click&#39;, function(){
            var content = document.querySelector(&#39;textarea&#39;).value;
            iframeA.contentWindow.postMessage(content, &#39;http://a.com:8090&#39;);
        }, false);
        sendToIframeB.addEventListener(&#39;click&#39;, function(){
            var content = document.querySelector(&#39;textarea&#39;).value;
            iframeB.contentWindow.postMessage(content, &#39;http://b.com:8090&#39;);
        }, false);
    </script>

Nach dem Login kopieren

a.com

       <h5>This is domain A</h5>
    <textarea name="subA" cols="30" rows="10"></textarea>
    <input type="button" value="send to parent"/>
    <div style="float:left;">
        <h5 id="received"></h5>
    </div>
    <script>
        var send = document.querySelector(&#39;input&#39;);
        var text = document.querySelector(&#39;textarea&#39;);
        var received = document.querySelector(&#39;#received&#39;);
 
        //receive message
        function getMessage(e){
            console.log(&#39;A received!&#39;);
            received.innerHTML = &#39;Receive message from &#39; + e.origin + &#39;, the data is &#39; + e.data;
            //e.source.postMessage(&#39;Received the message&#39;, e.origin);
        }
        window.addEventListener(&#39;message&#39;, getMessage, false);
 
        //post message
        send.addEventListener(&#39;click&#39;, function(){
            var content = text.value;
            window.parent.postMessage(content, &#39;http://main.com:8090&#39;);
        }, false);
    </script>

Nach dem Login kopieren

b.com

    <h5>This is domain B</h5>
    <textarea name="subB" cols="30" rows="10"></textarea>
    <input type="button" value="send to parent"/>
    <div style="float:left;">
        <h5 id="received"></h5>
    </div>
    <script>
        var send = document.querySelector(&#39;input&#39;);
        var text = document.querySelector(&#39;textarea&#39;);
        var received = document.querySelector(&#39;#received&#39;);
 
        //receive message
        function getMessage(e){
            console.log(&#39;B received!&#39;);
            received.innerHTML = &#39;Receive message from &#39; + e.origin + &#39;, the data is &#39; + e.data;
            //e.source.postMessage(&#39;Received the message&#39;, e.origin);
        }
        window.addEventListener(&#39;message&#39;, getMessage, false);
 
        //post message
        send.addEventListener(&#39;click&#39;, function(){
            var content = text.value;
            window.parent.postMessage(content, &#39;http://main.com:8090&#39;);
        }, false);
    </script>

Nach dem Login kopieren

Empfohlene verwandte Artikel:

HTML5-Anwendungen: Offline-Anwendungen und gespeicherte Anwendungen

HTML5-Canvas-Implementierung des erfolgreichen Karussell-Beispielcodes

Der Code für Postmessage in HTML5 zur Implementierung der Werteübertragung zwischen untergeordneten und übergeordneten Fenstern

Das obige ist der detaillierte Inhalt vonPostMessage in HTML5 implementiert eine domänenübergreifende Codeanalyse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!