详解HTML5 window.postMessage与跨域

日期:2021-02-23 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

在前1篇文章内容中,讲到访问器同宗对策,即阻拦不一样域的网页页面间浏览相互的方式和特性,并对处理同宗对策跨域难题提出的处理计划方案开展论述:子域代理商、JSONP、CORS。本篇将详尽论述HTML5 window.postMessage,依靠postMessage API,文本文档间能够以安全性可控性的方法完成跨域通讯,第3方JavaScript编码还可以与iframe内载入的外界文本文档开展通讯。

HTML5 window.postMessage API

HTML5 window.postMessage是1个安全性的、根据恶性事件的信息API。

postMessage推送信息

在必须推送信息的源对话框启用postMessage方式便可推送信息。

源对话框

源对话框能够是全局性的window目标,还可以是下列种类的对话框:

文本文档对话框中的iframe:  

var iframe = document.getElementById('my-iframe');
    var win = iframe.documentWindow;

JavaScript开启的弹窗:  

var win = window.open();

当今文本文档对话框的父对话框:  

var win = window.parent;

开启当今文本文档的对话框:  

var win = window.opener();

寻找源window目标后,便可启用postMessage API向总体目标对话框推送信息:

``win.postMessage('Hello', 'ttp://jhssdemo.duapp.com/');```

postMessage涵数接受两个主要参数:第1个为即将推送的信息,第2个为源对话框的源。

注:仅有当总体目标对话框的源与postMessage涵数中传入的源主要参数值配对时,才可以接受到信息。

接受postMessage信息

要想接受到以前源对话框根据postMessage传出的信息,只必须在总体目标对话框申请注册message恶性事件并关联恶性事件监视涵数,便可以在涵数主要参数中获得信息。

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

message恶性事件监视涵数接受1个主要参数,Event目标案例,该目标有3个特性:

  1. data 推送的实际信息
  2. origin 推送信息源
  3. source 推送信息对话框的window目标引入

表明

  1. 能够将postMessage涵数第2个主要参数设为*,在推送跨域信息时会绕过对推送信息的源的查验。
  2. postMessage只能推送标识符串信息内容。

案例

源对话框  

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF⑻">
        <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>

总体目标对话框win.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF⑻">
        <title>Html5 postMessage</title>
        <style>
            #txt {
                width: 500px;
                height: 300px;
                background-color: #cccccc;
            }
        </style>
    </head>
    <body>
        <h1>The New Window</h1>
        <div id="txt"></div>
        <script>        
            window.onload = function() {
                var text = document.getElementById('txt');  
                //监视涵数,接受1个主要参数--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>

回望

根据本篇的学习培训,掌握了应用HTML5的postMessage API在对话框间开展通讯,也了解能够依靠实际上现跨域通讯;当代访问器基础都适用postMessage,而针对1些旧式访问器如IE7-等,可使用1定的取代计划方案,开展数据信息通讯,如window.name、url查寻标识符和hash片断等。  

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:HTML5的postMessage的应用手册 返回下一篇:没有了