详解使用postMessage解决iframe跨域通信问题

//回调函数
function receiveMessageFromIndex ( event ) {
console.log( 'receiveMessageFromIndex', event )
}

//监听message事件
window.addEventListener("message", receiveMessageFromIndex, false);

我们只需要在子页面监听message事件，并且设置好回调函数即可，来看看打印出来的event：

event对象中的data属性存放着我们从父页面传过来的数据，就这么简单！

让我们再试试从子页面发送数据给父页面：

// iframePage.html
//给父页面发送消息，data为对象
parent.postMessage( {msg: 'MessageFromIframePage'}, '*');

父页面接收数据：

//index.html
//回调函数
function receiveMessageFromIframePage (event) {
console.log('receiveMessageFromIframePage', event)
}
//监听message事件
window.addEventListener("message", receiveMessageFromIframePage, false);

我看看到，的确可以传输不同的数据，此时data为一个对象：

大家可以到postMessage-demo把代码clone下来运行试试看。