postMessage简介:

postMessage为H5新特性,用来解决页面间的通信问题。

页面条件:

当然所谓的页面间也是有条件限制的。以下两种情况可以利用postMessage进行页面间通信。

1.页面和页面中嵌套的iframe。

2.页面和由该页面打开的新页面。

postMessage用法:
window.postMessage(msg,targetOrigin)

postMessage触发message事件,由此达到页面间通信的目的。

参数msg为要发送的数据,格式支持String或Object。注意:IE8中只支持String格式。

接收数据:

在接收的回调函数中,定义参数event。
event.origin为事件源的origin,即协议+域名+端口;
event.data为接收到数据;
event.source为触发该事件的页面的window对象;

示例(iframe):

实现功能:父页面与iframe页面间的通信。

父页面地址:http://localhost:9020/test/iframe/main.html

iframe页面地址:http://localhost:9020/test/iframe/sub.html

父页面code:

iframe页面code:

1 收藏


直接登录