跨域、跨文档传输数据（三）---- postMessage ；实现跨文档消息传输；

来源：互联网发布：淘宝一个金冠要多少丹编辑：程序博客网时间：2024/05/02 01:23

之前写过两篇解决跨文档消息传输的解决方案。其中一种使用了MessageJS的插件方法，其实MessageJS

这个插件的原理就是使用了HTML5提供的postMessage；

一下讲讲，postMessage的实际用法以及基本知识：

HTML5提供了在网页之间互相接受与发送消息的功能；

可以获取到网页所在窗口的对象实例，不进同源（域+端口号）的web网页之间的互相通信，也可以实现跨域通信；

兼容性：

IE8+,
Firefox 3.1+,
Opera 9+,
Safari,
Chrome

首先：想要接收从其他窗口发过来的消息，就必须对窗口对象进行监听：

监听方法：

window.addEventListener("message", function(e){...}, false);

发送消息：

/***  @message:发送的消息文本，可以是数字。字符串，也可以是javascript的对象（通过JSON转换为对象文本）；*  @origin:接收消息的对象窗口的URL地址（例如http://1.1.1.1:8080；带端口号。），这个参数也可以使用*          通配符"*"，意思是指定发送给全部的地址，这样的话所有的网页都能收到你发来的消息，友情提示：*          不建议这么用，最好使用指定的URL；该参数发送时，只包括域和端口号；*/otherWindow.postMessage(message,origin);

案例
以下案例，来说明iframe在使用postMessage跨域传输数据；
父页面和子页面，在不同的主机上发布（IP地址不同）

跨域通信 — 主（父）页面 postParent.html：

<!DOCTYPE html><html><head><title>postMessage：跨域传输数据主页面</title></head><body>    <div>        <p>接受来自:</p>        <h1 id="h1"></h1>        <p>的消息：</p>        <h1 id="p_text"></h1>    </div>    <iframe width="500px" height="500px" id="iframe"         src="http://1.1.1.1:8080/postMessage/postMessage1.html"         onload="send()">    </iframe>       <script type="text/javascript">        // 窗口事件监听：监听message        window.addEventListener("message",function(e){            // e.origin:发送消息的地址，谁发的消息就是谁的            // 接收时候，可以加个判断;避免接收来源不明的URL发过来的数据            if( e.origin != "http://1.1.1.2:8080" ){                return;            }            document.getElementById("h1").innerHTML = e.origin;            // e.data:发消息的内容            document.getElementById("p_text").innerHTML = e.data;        },false);        // 发消息        function send(){            // 获取嵌入的iframe            var iframe = window.frames[0],                send_origin = document.getElementById("iframe").getAttribute("src");            iframe.postMessage("我是父页面的消息---唉呀妈呀",send_origin);        }    </script></body></html>

跨域通信 — 子（嵌入）页面 postMessage1.html：

<!DOCTYPE html><html><head><title>postMessage：跨域传输数据子页面</title></head><body>    <div>        <p>接受来自:</p>        <h1 id="h1"></h1>        <p>的消息：</p>        <h1 id="p_text"></h1>    </div>      <script type="text/javascript">         // 窗口事件监听：监听message        window.addEventListener("message",function(e){            // e.origin:发送消息的地址，谁发的消息就是谁的            // 接收时候，可以加个判断;避免接收来源不明的URL发过来的数据            if( e.origin != "http://1.1.1.1:8080" ){                return;            }            document.getElementById("h1").innerHTML = e.origin;             // e.data:发消息的内容            document.getElementById("p_text").innerHTML = e.data;            // 接收到消息后，在回过去，回个话；            // 通过访问message的source的属性，来获取消息发送源的窗口对象，            // 也就是能知道是谁发的消息，在通过postMessage，给发消息者回个话            e.source.postMessage("我是子页面的消息---呵呵哒",e.origin);        },false);    </script></body></html>

注意：
1.origin属性，可以获取消息的发送源。请注意，发送源与网站的URL地址不是统一概念，发送源只包括域名和端口号。为；了不接收同其他源发送过来的恶意的乱七八糟的消息，最好对发送源做个检查；屏蔽掉一些不需要的消息；
2.data属性，可以得到消息的内容，可以是任何javascript对象；
3.使用postMessage发消息；
4.source属性，可以获取消息发送源的窗口代理对象；

结果图：(实在抱歉测试的时候，用的IP是真的，只能覆盖了；理解理解！)

这里写图片描述

以上是整理postMessage跨文档传输消息

0 0

跨域、跨文档传输数据（三）---- postMessage ； 实现跨文档消息传输；

跨域、跨文档传输数据（三）---- postMessage ；实现跨文档消息传输；