cvmachine.com - 申博开户网

查找: 您的方位主页 > 网络频道 > 阅览资讯:HTMl5 window.postmessage与跨域介绍分析师

HTMl5 window.postmessage与跨域介绍分析师

2017-09-23 21:10:28 来历:www.cvmachine.com 【

HTMl5 window.postmessage与跨域介绍分析师

在前一篇文章中,讲到浏览器同源战略,即阻挠不同域的页面间拜访互相的办法和特点,并对处理同源战略跨域问题提出的处理计划进行论述:子域署理、JSONP、CORS。本篇将具体论述HTML5 window.postMessage,凭借postMessage API,文档间能够以安全可控的办法完成跨域通讯,第三方JavaScript代码也能够与iframe内加载的外部文档进行通讯。

HTML5 window.postMessage API

HTML5 window.postMessage是一个安全的、根据事情的音讯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函数接纳两个参数:第一个为即将发送的音讯,第二个为源窗口的源。

注:只有当方针窗口的源与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事情监听函数接纳一个参数,Event方针实例,该方针有三个特点:

  1. data 发送的具体音讯
  2. origin 发送音讯源
  3. source 发送音讯窗口的window方针引证

阐明

  1. 能够将postMessage函数第二个参数设为*,在发送跨域音讯时会越过对发送音讯的源的查看。
  2. postMessage只能发送字符串信息。

实例

源窗口

<!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>

方针窗口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>
    <div id="txt"></div>
    <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>

回忆

经过本篇的学习,了解了运用HTML5的postMessage API在窗口间进行通讯,也知道能够凭借其完成跨域通讯;现代浏览器根本都支撑postMessage,而关于一些旧式浏览器如IE7-等,能够运用必定的代替计划,进行数据通讯,如window.name、url查询字符和hash片段等。

以上便是本文的全部内容,期望对咱们的学习有所协助,也期望咱们多多支撑申博开户。


本文地址:http://www.cvmachine.com/a/question/92747.html
m88 188bet uedbet 威廉希尔 明升 bwin 明升88 bodog bwin 明升m88.com 18luck 188bet unibet unibet Ladbrokes Ladbrokes casino m88明升 明升 明升 m88.com 188bet m88 明陞 uedbet赫塔菲官网 365bet官网 m88 help
188bet www.188bet.com bwin 平博 unibet 明升 188bet uk Ladbrokes 德赢vwin 188bet m88.com w88 平博88 uedbet体育 188bet 188bet 威廉希尔 明升体育app 平博88 M88 Games vwin德赢 uedbet官网 bodog fun88 188bet
Tags: HTML5 详解 window.postMessage
修改:申博开户网
关于咱们 | 联络咱们 | 友情链接 | 网站地图 | Sitemap | App | 回来顶部