Javascript 使用 BroadcastChannel 实现页面间通信

最近有个需要页面见通信的需求，这里简单用 BroadcastChannel 函数实现下，首先需要两个页面，其中页面A的代码如下：

const bc = new BroadcastChannel('bc');
const btn = document.querySelector('#js_btn');

bc.addEventListener('message', (event) => {
    console.log('a:', event);
});

btn.addEventListener('click', () => {
    bc.postMessage('from a');
});

window.addEventListener('beforeunload', (event) => {
    const msg = '你确定要离开这个页面吗？';
    event.returnValue = msg;
    return msg;
});

window.addEventListener('unload', (event) => {
    bc.close();
});

页面B的代码如下：

const bc = new BroadcastChannel('bc');
const btn = document.querySelector('#js_btn');

bc.addEventListener('message', (event) => {
    console.log('b:', event);
});

btn.addEventListener('click', () => {
    bc.postMessage('from b');
});

window.addEventListener('beforeunload', (event) => {
    const msg = '你确定要离开这个页面吗？';
    event.returnValue = msg;
    return msg;
});

window.addEventListener('unload', (event) => {
    bc.close();
});

这样就可以实现页面间的通信了。