JavaScript postMessage跨域通信

这玩意儿很早以前就有了，只是一直没流行起来。但是现在差不多可以用用了，下面这个是国内最新的浏览器市场份额数据 
　　可见IE8的普及程度已经很高了，所以不做IE7-的网站也渐渐多起来，是时候使用这些东西了。
　　这里说的postMessage是window对象的方法，它有两个参数，第一个是发送的消息，第二个是目标window对象打开页面的协议和域名。postMessage还有另外一个Worker版，这里就不介绍了。下面是一个最简单的postMessage例子，给自身window对象丢去消息。这个例子还没涉及到跨域问题，但是可以很清楚的了解postMessage的用法。

<script>
 onmessage=function(e){
   e=e||event;
   document.write("消息：",e.data);
 };
 postMessage("次碳酸钴","http://127.0.0.1");
 </script>

　　这个例子中使用的postMessage实际上就是window.postMessage，也就是向window这个对象发送消息。window对象接收到消息后会触发message事件，在这个例子中message事件触发时会把收到的消息输出到文档上，这就是我们看到的结果。postMessage的第二个参数是一个包含协议名称和域名的URL格式字符串（Worker版没有这个参数），你也可以在这个字符中加入具体的路径，这不会影响结果。
　　在对自身window对象postMessage的时候，它的功能就和detachEvent（fireEvent）类似，就是触发一个事件而已。postMessage最初的设计是用来与Worker（JavaScript独立子进程）通信的，这本身没有跨域问题，后来被扩展到window对象上，我们就可以跨域使用它做页面间的通信。跨域使用它通常是和IFRAME配合使用的，因为IFRAME可以很容易的获取到其中的window对象，我们就可以对IFRAME中的异域window执行postMessage。下面是例子：

<!--http://127.0.0.1/a.html-->
 <iframe id="f" src="http://localhost/b.html"></iframe>
 <script>
 var f=document.getElementById("f");
 f.οnlοad=function(){
   f.contentWindow.postMessage("SB","http://localhost");
 }
 </script>

<!--http://localhost/b.html-->
 <script>
 onmessage=function(e){
   e=e||event;
   document.write("我是",e.data);
 };
 </script>

　　其实和之前的例子一样，这个例子中是调用了f.contentWindow的postMessage，你可以理解调用f.contentWindow的postMessage方法来触发f.contentWindow的message事件，就像主动派送一个事件一样，只不过是跨域的而已。
　　postMessage的用法是很简单的，但是也有一些麻烦的问题，比如说事件回调。在message事件中由于跨域限制，无法获取这个消息来源的window对象，因此我们无法回送消息，这也是使用这个跨域方法最蛋疼的地方。就因为这个，postMessage在跨域方面上不是主流方法，所以这就作为一个跨域的候补方法吧。到这里使用postMessage跨域相关的东西也说完了，下面是一些相关的文档。
　　 MSDN postMessage
　　 MSDN onmessage
　　 MDN postMessage
　　 MDN onmessage

转载请注明：前端录»JavaScript postMessage跨域通信

<script src="http://www.wozhuye.com/index.php?m=digg&c=index&a=init&id=20-76-2"></script>