HTML5 postMessage 跨域交换数据(2)

   在消息接收端监听可以监听message事件(代码如上),当然如果要兼容坑爹的ie肯定要用attachEvent。这里不推荐使用window.onmessage,兼容性不大好(比如不能兼容低版本ff)。

window <-> window

  说完了跟同一页面中的iframe的数据交换,再来说说两个窗口之间的数据交换。我们知道用window.open()可以打开一个新的窗口,而如果两个窗口同源,则两个窗口的通信将会非常简单,我们可以通过window.opener.functionName在新窗口中调用原来窗口的方法(和变量)。但是如果两个窗口不同源,这样的操作将会变得很艰难,幸运的是H5给我们提供了postMessage,使得window.opener.postMessage()不会报错!demo很简单:

<!-- http://localhost:81/fish/index.html --> <script type="text/javascript"> // 打开一个新的窗口 var popup = window.open('https://localhost:8080/index.html'); /// When the popup has fully loaded, if not blocked by a popup blocker: setTimeout(function() { // 当前窗口向目标源传数据 popup.postMessage({"age":10}, 'http://localhost:8080'); }, 1000); </script>

 

 

<!-- http://localhost:8080/index.html --> <script type="text/javascript"> // 设置监听,如果有数据传过来,则打印 window.addEventListener('message', function(e) { console.log(e); // console.log(e.source === window.opener); // true }); </script>

  这里要设置一个定时器的原因是向目标窗口发送数据必须等目标窗口完全加载完,也就是说要在目标窗口中先设置好“监听器”,发送窗口发的数据才能被监听到,所以给了个定时器delay,而因为加载时间的不确定所以定时器的delay值也不能确定;另外一个可行的办法是当目标页面加载完后,发个消息个源页面(postMessage),而源页面收到消息,再用postMessage发送消息给目标页面。

安全顾虑

  提到跨域交换数据,条件反射都会问一句,安全吗?对于postMessage,答案是肯定的。

  postMessage采用的是“双向安全机制”。发送方发送数据的时候,会确认接受方的源(所以最好不要用*),而接受方监听到message事件后,也可以用event.origin判断是否来自于正确可靠的发送方。

--------------------------------------分割线 -------------------------------------- 

HTML5 地理位置定位(HTML5 Geolocation)原理及应用  

HTML5移动开发即学即用(双色) PDF+源码  

HTML5入门学习笔记  

HTML5移动Web开发笔记  

HTML5 开发中的本地存储的安全风险  

《HTML5与CSS3权威指南》及相配套源码  

关于 HTML5 令人激动的 10 项预测  

HTML5与CSS3实战指南 PDF  

--------------------------------------分割线 -------------------------------------- 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/68d8f8b0ee78c3c1819f0f7d278e5a99.html