js XDM跨文档信息传递

2018-1-25 23:27:20 4,593 views

跨文档信息传递

跨文档信息传送,指的是在来自不同域的页面间传递消息
例如 :www.wrox.com域中的页面与位于一个内嵌框架中的p2p.wrox.com域中的页面通信

postMessage()

XDM的核心方法是postMessage(),
它的主要目的是向另一个地方传递数据,另一个地方指的是包含在当前页面中的<iframe>元素,或者由当前页面弹出的窗口。
接收2个参数:
<1>一条消息,
<2>一个表示信息接收方来自哪个域的字符串。不推荐使用*
第二个参数对保障安全通信非常重要,可以防止浏览器把消息发送到不安全的地方
常可以用作跨域绕过同源策略

同源策略

同源策略:只有域,端口,协议相同的URL才能够相互通信
案例图片:从内嵌框架中向外部发送信息
2个分别来自不同的源
内嵌:http://test.suanliutudousi.com/test/demo/send.html
外部:http://www.suanliutudousi.com/TestInstance/receive.html
test
想要体验一下?戳这里==>输入数据后打开控制台即可看到信息。 http://www.suanliutudousi.com/TestInstance/receive.html
如果不能运行的话,你可以将对应的地址换成本地的不同的源即可。

send.html

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <textarea name="" rows="" cols="" id="text"></textarea>
    <button>发送</button>
    <script type="text/javascript">
      var btn = document.getElementsByTagName("button")[0];
      btn.onclick = function() {
        /**
         * 向接收页面发送消息,
         * otherWindow.postMessage(message, targetOrigin, [transfer]);
         * targetOrigin用*不安全
         * top对象始终指向最高层的框架,也就是浏览器窗口
         * window对象指向的是当前所在框架的特定实例
         */
        top.postMessage(document.getElementById("text").value, "http://www.suanliutudousi.com");
        //这里的top指向浏览器窗口,用window会报Failed to execute 'postMessage' on 'DOMWindow'
      };
      //处理接收回执信息
      window.onmessage = function(event) {
        event = window.event || event;
        if(event.origin == "http://www.suanliutudousi.com") {
          console.log(event.data);
        }
      };
      //接收回执信息
    </script>
  </body>
</html>

 

receive.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>跨域POST消息发送</title>
  </head>
  <body>
    <iframe src="http://test.suanliutudousi.com/test/demo/send.html" id="otherPage"></iframe>
    <script type="text/javascript">
      //处理内嵌框架发过来的信息,接收到XDM消息时,会触发window对象的message事件
      window.onmessage = function(event) {
        /**
         * window.onmessage事件是以异步形式触发的,触发后,event事件对象将包含3个属性
         * @data:作为postMessage()第一个参数传入的字符串数据
         * @origin:发送消息的文档所在的域,
         * @source,发送消息的文档的window对象的代理:event.source相当于发送方中的window对象
         */
        event = window.event || event;
        if(event.origin == "http://test.suanliutudousi.com") { //结尾不能有/
          //如果发送方来自http://test.suanliutudousi.com,验证来源,保证安全。
          console.log(event.data); //输出接收到的信息
          event.source.postMessage("received", "http://test.suanliutudousi.com");
          //向发送方返回回执信息
        }
      };
    </script>
  </body>
</html>

 

5

分享到微信朋友圈

打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。