PostMessage en HTML5 implémente une analyse de code inter-domaines-Tutoriel H5-php.cn

PostMessage en HTML5 implémente une analyse de code inter-domaines

不言

Libérer： 2018-08-08 10:51:15

original

2328 Les gens l'ont consulté

Le contenu de cet article concerne l'analyse du code de l'implémentation inter-domaines de postMessage en HTML5. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

De nombreuses personnes ont à moitié compris l'utilisation de H5 pour réaliser une implémentation inter-domaines. Nous savons que postMessage est utilisé pour envoyer des messages et onMessage est utilisé pour recevoir des messages, mais il n'est pas très clair quelle méthode doit être appelée en utilisant window et laquelle doit être appelée en utilisant contentWindow d'iframe. Vous trouverez ci-dessous une petite démo que j'ai réalisée pour implémenter l'implémentation locale inter-domaines. Cet exemple peut être téléchargé depuis github. Pour l'exécuter, vous devez d'abord trouver le fichier hosts de votre ordinateur et ajouter le code suivant sous 127.0.0.1 localhost :

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

Copier après la connexion

Ensuite, vous devez démarrer un serveur, tel qu'Apache, etc., et téléchargez-le depuis github. Placez trois fichiers html sur votre serveur. Enfin, il vous suffit de visiter http://main.com : votre numéro de port pour communiquer entre domaines.

La relation entre les trois fichiers html est la suivante : trois domaines : http://main.com:8090 ; http://a.com:8090 ; La page principale maindomain.html se trouve dans main.com, et il y a deux iframes (subAdomain.html, subBdomain.html) respectivement dans a.com, b.com . Dans maindomain.html, saisissez un message dans la zone de texte et cliquez sur le bouton Envoyer vers l'iframe pour envoyer le message à l'iframe spécifié. (sous-domaine.html ou subBdomain.html), vous pouvez également envoyer des messages à maindomain.html dans ifame, et en même temps, il existe des informations de réception pour recevoir le message ifame.

Cela devrait être un scénario très courant. Placez les ressources publiques du site Web dans un certain sous-domaine, et d'autres sous-domaines doivent accéder aux ressources de ce sous-domaine. L'effet obtenu est le suivant.

1. Sans informations sur le reçu :
PostMessage en HTML5 implémente une analyse de code inter-domaines

2. Avec informations sur le reçu :
PostMessage en HTML5 implémente une analyse de code inter-domaines

Connaissances de base

Introduisez d'abord quelques attributs de l'événement dans l'événement onMessage. Les comprendre vous permettra de comprendre facilement mon exemple.
* data : Données entrantes
* origin : Le domaine où se trouve le document qui envoie le message
* source : Le proxy de l'objet window du document qui envoie le message
Si vous souhaitez envoyer le message du sous-domaine X au sous-domaine Pour envoyer un message dans le domaine Y, vous devez récupérer l'objet window de Y (contentWindow de l'iframe) dans le fichier html du sous-domaine X, puis appeler postMessage(message, Le domaine où se trouve Y), et en même temps, dans le fichier html du sous-domaine Y, il suffit d'écouter l'événement message de l'objet fenêtre (en utilisant onMessage). Bien entendu, vous pouvez à nouveau utiliser postMessage dans onMessage pour envoyer un message de réception au sous-domaine X. Ce qui nous rend souvent confus, c'est sur quel objet fenêtre du domaine appeler postMessage.

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion