其他分享
首页 > 其他分享> > window.postMessage 父子窗口传值的正确用法

window.postMessage 父子窗口传值的正确用法

作者:互联网

        接触到这个还是因为碰到一个两年前的项目,现在需要加新功能,这个是一个无vuex、无router的题目资源中心的项目。所以就想到了两个页面在不使用接口传值的方式进行postMessage通信。

        1. 父标签页通过按钮等事件打开了子标签页后,注意:不要关闭父窗口 而是新开一个子窗口。

openChildWindow() {
    window.open('http://www.child.com');
}

        2. 子窗口点击按钮后触发了 window.opener.postmessage(data,origin,[transfer](这个参数我没有使用上))。

// 传递信息到父窗口的触发事件
onclickSendMessage() {
    // 父窗口不能关闭
    if(window.opener) {
        // otherwindow.postmessage(data, origin)
        window.opener.postMessage('Father, I'm coming!', 'http://www.parents.com');
    }
}

        3.父标签页需要在mounted生命周期里就注册addEventListener监听message事件,监听子窗口发来的postmessage。

mounted() {
    let _this = this;
    window.addEventListener('message', event=> {
        if(event.origin.includes('parents')) {
            // 最好对数据进行处理,当使用webpack时 webpack自身会发送postMessage,注意监听                            
            // message时区分具体是自己发来的message还是webpackOK ;
            _this.processData(event.data);
        }
    })
}

        第一次把自己的踩坑经历以及成品,展示出来,非常激动呢~ 希望我的分享你们喜欢,毕竟写blog的时间不长,有什么更好的经验和我这边有什么不妥或不严谨的写法,大家都能给我留个言喔~谢谢啦!

标签:postMessage,postmessage,窗口,window,message,event,传值
来源: https://blog.csdn.net/m0_61093442/article/details/121039927