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