浏览器pc 标签页 之间建立通讯

通过 window.open 打开新标签页 使用 postMessage 传递数据和操作控制，标签页之间的获取焦点与关闭数据通信

一、a.html

1.打开 b.html 新标签页 并 把返回值储存在 myWindow;

let myWindow = window.open(window.location.origin + '/#/webChat');

//myWindow.closed 为判断是否断开链接

2.建立心跳通讯 可保持重新接收链接 对a.html进行发送通讯 (可防止 b.html 标签页刷新之后断开链接)

const IntervalTime = null;

const setIntervalFun = () => {
    if (IntervalTime == null) {
    IntervalTime = setInterval(() => {
        
        //发送消息
        myWindow?.postMessage('建立链接', '*');



    }, 2000);
    }
};

setTimeout(() => {
    setIntervalFun();
    //让 b.html 显示聚焦
    myWindow?.focus();
}, 1500);

二、b.html

1.监听 a.html 发送的通讯

// 监听心跳

window.addEventListener('message', function (e) {
    //监听到心跳链接 e 为数据包 
    //消息源数据包 可对其数据源包进行操作  e.source

    // 数据发送
    e.source.postMessage('b.html 监听到消息 并回复消息')
    //控制消息源 页面跳转
    e.source.location.href = 'http://localhost:3100/#/amount';
});

三、window.focus() 无效 需要在 b.html子窗口获取a.html主窗口的焦点，

1.需要在a.html 中设置 

window.name = 'VMAllNAV';

2.b.html 中 执行 open 获取父窗口name值

window.open('javascript:;', window.opener.name);