标签：postMessage postmessage 窗口 window message event 传值

        接触到这个还是因为碰到一个两年前的项目，现在需要加新功能，这个是一个无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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。