Fenêtre H5.postMessage et cross-domain-Tutoriel H5-php.cn

Fenêtre H5.postMessage et cross-domain

php中世界最好的语言

Libérer： 2018-03-26 16:18:28

original

2164 Les gens l'ont consulté

Cette fois, je vais vous présenter H5 window.postMessage et cross-domain, quelles sont les précautions à propos de window.postMessage et cross-domain Ce qui suit est un cas pratique, jetons un coup d'œil.

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, et avons élaboré les solutions pour résoudre le problème inter-domaines du même -politique d'origine : proxy de sous-domaine, JSONP, 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.

postMessageEnvoyer 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 l'objet fenêtre global, ou elle peut être le type de fenêtre suivant :

Iframe du document dans la fenêtre :

var iframe = document.getElementById('my-iframe');
    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

Ouvrez 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('Hello', 'ttp://jhssdemo.duapp.com/');"

Copier après la connexion

La fonction postMessage 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('txt');  
        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('message', receiveMsg, false);
        }else {
            window.attachEvent('message', 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 Le message spécifique envoyé
origine Source du message d'envoi
source Référence de l'objet Fenêtre de la fenêtre d'envoi du message

Description

Vous pouvez définir le deuxième paramètre de la fonction postMessage sur * pour ignorer la vérification de la source du message lors de l'envoi d'un message inter-domaines.
postMessage ne peut envoyer que des informations de 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('btn');
                var btn_send = document.getElementById('send');
                var sendBtn = document.getElementById('sendMessage');
                var win;
                btn.onclick = function() {
                    //通过window.open打开接收消息目标窗口
                    win = window.open('http://jhssdemo.duapp.com/demo/h5_postmessage/win.html', 'popUp');
                }
                btn_send.onclick = function() { 
                    // 通过 postMessage 向子窗口发送数据      
                    win.postMessage('Hello', 'http://jhssdemo.duapp.com/');
                }
                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('txt');  
                //监听函数，接收一个参数--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('message', receiveMsg, false);
                }else {
                    window.attachEvent('message', receiveMsg);
                }
            };
        </script>
    </body>
    </html>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'obtention d'informations de localisation avec phonegap

Explication détaillée de la création de contacts avec phonegap

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!