Javascript中要实现跨域通信,主要有window.name,jsonp,document.domain,cors等方法。不过在H5中有一种新的方法postMessage可以安全实现跨域通信,并且使用简单。

要使用postMessage,首先得检查浏览器是否支持该方法,postMessage属于window对象,检测方法如下:

if('postMessage' in window){
    
}else{
    console.log('浏览器不支持postMessage');
}

postMessage使用语法如下所示。

复制代码
otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow必须是一个window对象的引用,如iframe的contentWindow,window.open的返回对象,window.frames[index]等。

targetOrigin指定otherWindow的源,如果目标窗口的协议,主机地址,端口只要一个不同,该方法便不会执行信息发送
复制代码

为了能接收到postMessage发送的消息,必须在window对象上监听message事件,该事件对象包涵了data(消息)、origin(来源地址)、source(来源窗口代理)等属性,使用如下所示