最近项目中iframe通信,使用了onmessage,
window.addEventListener('message',function(event){...})
window.onmessage = function(event){...}
postMessage和onmessage是HTML5的方法,用来解决跨页面通信,或者通过iframe嵌套的不同页面的通信的。postMessage为发送方,onmessage为接收方。
页面A
/**
* onmessage接收方,对应/public/iframe/videoPlay.html
* @param e
*/
window.onmessage = function (e) {
console.log('onmessage收到请求,save...', e.data);
api_service(e.data).then((res) => {
if (res.success) { }
})
}
页面B
window.addEventListener("message", receiveMessageFromIndex, false);
/**
* 回调函数,切记,只被调用一次
*/
function receiveMessageFromIndex(event) {
//TODO..做了一些关于视频初始化赋值的操作
}
/**
* 发送方给content数据,
* /pages/content
*/
function sendMessage() {
/**
* message监听器说明
* otherWindow.postMessage(message, targetOrigin, [transfer]);
* otherWindow--其他窗口的一个引用,比如 iframe 的 contentWindow 属性、执行window.open返回的窗口对象
* message--将要发送到其他 window 的数据
* targetOrigin--通过窗口的 origin 属性来指定哪些窗口能接收到消息事件,其值可以是字符串"*"(表示无限制)或者一个 URI
* [transfer]--是一串和 message 同时传递的 Transferable 对象
*/
window.parent.postMessage(data)
这样实现了2个页面的通信。发送方postMessage如果只有一个参数,默认是local