HTML5 window.postMessage et exemple de didacticiel inter-domaines-Tutoriel H5-php.cn

HTML5 window.postMessage et exemple de didacticiel inter-domaines

零下一度

Libérer： 2017-05-13 13:14:36

original

1676 Les gens l'ont consulté

Cet article présente principalement l'explication détaillée du HTML5 window.postMessage et cross-domain, qui est d'une grande valeur pratique. Les amis dans le besoin peuvent s'y référer

Dans l'article précédent. , nous avons parlé de la politique de même origine du navigateur qui empêche les pages de différents domaines d'accéder aux méthodes et attributs des autres. Il explique également les solutions proposées pour résoudre le problème inter-domaines de la politique de même origine : proxy de sous-domaine, JSONP et CORS. . Cet article détaillera window.postMessage HTML5. Avec l'API postMessage, une communication interdomaine peut être réalisée entre les documents de manière sûre et contrôlable. Le code JavaScript tiers peut également communiquer avec des documents externes chargés dans des iframes.

API HTML5 window.postMessage

HTML5 window.postMessage est une API de messagerie sécurisée basée sur les événements.

postMessage envoie un message

Appelez la méthode postMessage dans la fenêtre source où le message doit être envoyé pour envoyer le message.

Fenêtre source

La fenêtre source peut être un objet fenêtre global ou les types de fenêtres suivants :

iframe dans la fenêtre du document :

var iframe = document.getElementById(&#39;my-iframe&#39;);
    var win = iframe.documentWindow;

Copier après la connexion

Fenêtre pop-up ouverte par JavaScript :

var win = window.open();

Copier après la connexion

La fenêtre parent de la fenêtre du document actuel :

var win = window.parent;

Copier après la connexion

Ouvre la fenêtre du document actuel :

var win = window.opener();

Copier après la connexion

Après avoir trouvé l'objet fenêtre source, vous pouvez appeler l'API postMessage pour envoyer un message à la fenêtre cible :

``win.postMessage(&#39;Hello&#39;, &#39;ttp://jhssdemo.duapp.com/&#39;);"

Copier après la connexion

postMessageLa fonction reçoit deux paramètres : le premier doit être envoyé Message, le second est la source de la fenêtre source.

Remarque : Le message ne peut être reçu que lorsque la source de la fenêtre cible correspond à la valeur du paramètre source transmise dans la fonction postMessage.

Recevoir un message postMessage

Pour recevoir le message précédemment envoyé par la fenêtre source via postMessage, il vous suffit d'enregistrer l'événement de message dans la fenêtre cible et de lier l'événement fonction d'écoute. Les messages peuvent être obtenus dans paramètres de fonction.

window.onload = function() {
        var text = document.getElementById(&#39;txt&#39;);  
        function receiveMsg(e) {
            console.log("Got a message!");
            console.log("nMessage: " + e.data);
            console.log("nOrigin: " + e.origin);
            // console.log("Source: " + e.source);
            text.innerHTML = "Got a message!<br>" +
                "Message: " + e.data +
                "<br>Origin: " + e.origin;
        }
        if (window.addEventListener) {
            //为窗口注册message事件，并绑定监听函数
            window.addEventListener(&#39;message&#39;, receiveMsg, false);
        }else {
            window.attachEvent(&#39;message&#39;, receiveMsg);
        }
    };

Copier après la connexion

La fonction d'écoute d'événement de message reçoit un paramètre, une instance d'objet Event, qui possède trois attributs :

data Envoyer Le message spécifique
origine envoyer la source du message
source envoyer l'objet fenêtre de la fenêtre de message référence

Explication

Vous pouvez définir le deuxième paramètre de la fonction postMessage sur *, ce qui ignorera l'envoi du message lors de l'envoi messages inter-domaines. Vérifiez la source.
postMessage ne peut envoyer que des informations chaîne .

Instance

Fenêtre source

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Html5 postMessage</title>
        <style>
            #otherWin {
                width: 600px;
                height: 400px;
                background-color: #cccccc;
            }
        </style>
    </head>
    <body>
        <button id="btn">open</button>
        <button id="send">send</button>
         <!-- 通过 iframe 嵌入子页面(接收消息目标窗口) --> 
         <iframe src="http://jhssdemo.duapp.com/demo/h5_postmessage/win.html" 
                     id="otherWin"></iframe> 
         <br/><br/> 
         <input type="text" id="message"><input type="button" 
                 value="Send to child.com" id="sendMessage" /> 
        <script>
            window.onload = function() {
                var btn = document.getElementById(&#39;btn&#39;);
                var btn_send = document.getElementById(&#39;send&#39;);
                var sendBtn = document.getElementById(&#39;sendMessage&#39;);
                var win;
                btn.onclick = function() {
                    //通过window.open打开接收消息目标窗口
                    win = window.open(&#39;http://jhssdemo.duapp.com/demo/h5_postmessage/win.html&#39;, &#39;popUp&#39;);
                }
                btn_send.onclick = function() { 
                    // 通过 postMessage 向子窗口发送数据      
                    win.postMessage(&#39;Hello&#39;, &#39;http://jhssdemo.duapp.com/&#39;);
                }
                function sendIt(e){ 
                    // 通过 postMessage 向子窗口发送数据
                    document.getElementById("otherWin").contentWindow 
                    .postMessage( 
                        document.getElementById("message").value, 
                        "http://jhssdemo.duapp.com/"); 
                } 
                sendBtn.onclick = function(e) {
                    sendIt(e);
                };
            };
        </script>
    </body>
    </html>

Copier après la connexion

Fenêtre cible win.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Html5 postMessage</title>
        <style>
            #txt {
                width: 500px;
                height: 300px;
                background-color: #cccccc;
            }
        </style>
    </head>
    <body>
        <h1>The New Window</h1>
        <p id="txt"></p>
        <script>        
            window.onload = function() {
                var text = document.getElementById(&#39;txt&#39;);  
                //监听函数，接收一个参数--Event事件对象
                function receiveMsg(e) {
                    console.log("Got a message!");
                    console.log("nMessage: " + e.data);
                    console.log("nOrigin: " + e.origin);
                    text.innerHTML = "Got a message!<br>" +
                        "Message: " + e.data +
                        "<br>Origin: " + e.origin;
                }
                if (window.addEventListener) {
                    //为window注册message事件并绑定监听函数
                    window.addEventListener(&#39;message&#39;, receiveMsg, false);
                }else {
                    window.attachEvent(&#39;message&#39;, receiveMsg);
                }
            };
        </script>
    </body>
    </html>

Copier après la connexion

Révision

Grâce à l'étude de cet article, j'ai appris à utiliser l'API postMessage de HTML5 pour communiquer entre fenêtres, et j'ai également appris qu'elle peut être utilisée pour réaliser des communications croisées. communication de domaine ; navigation moderne La plupart des navigateurs prennent en charge postMessage, mais pour certains anciens navigateurs tels que IE7-etc., certaines alternatives peuvent être utilisées pour la communication de données, telles que window.name, urlquery caractères et hachage Fragments etc.

【Recommandations associées】

1. Recommandation spéciale : "php Programmer Toolbox" version V0.1 Télécharger

2. Tutoriel vidéo en ligne h5 gratuit

3 Tutoriel vidéo html5 original php.cn

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!