recherche

Maison  >  Article  >  interface Web  >  Fenêtre H5.postMessage et cross-domain

Fenêtre H5.postMessage et cross-domain

php中世界最好的语言
php中世界最好的语言original
2018-03-26 16:18:282158parcourir

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;

Fenêtre pop-up ouverte par JavaScript : 

var win = window.open();

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

var win = window.parent;

Ouvrez la fenêtre du document actuel : 

var win = window.opener();

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/');"

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

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

  1. data Le message spécifique envoyé

  2. origine Source du message d'envoi

  3. source Référence de l'objet Fenêtre de la fenêtre d'envoi du message

Description

  1. 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.

  2. 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>

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>

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!

php JavaScript html5 html 字符串 Event 对象 事件 phonegap
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：API glisser-déposer H5 pour le tri par glisser-déposerArticle suivant：API glisser-déposer H5 pour le tri par glisser-déposer

Articles Liés

Voir plus