前端录网站,记录前端点点滴滴,帮助程序猿快速成长!

JavaScript postMessage跨域通信

js
这玩意儿很早以前就有了,只是一直没流行起来。但是现在差不多可以用用了,下面这个是国内最新的浏览器市场份额数据 
  可见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.onload=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跨域通信