跨页面通信

1. 介绍

同源页面之间通信

2. BroadCast Channel

说明：

• 创建一个命名频道，消息可以广播到所有监听了该频道的 BroadcastChannel 对象。
• BroadcastChannel 接口代理了一个命名频道，可以让指定 origin 下的任意 browsing context 来订阅它。它允许同源的不同浏览器窗口，Tab 页，frame 或者 iframe 下的不同文档之间相互通信。通过触发一个 message 事件，消息可以广播到所有监听了该频道的 BroadcastChannel 对象。

示例：

// -- pageA.html

const channel = new BroadcastChannel('test_channel');

channel.onmessage = (event) => {
  console.log( event.data ); // => { name: 'zhangsan' }
};


// -- pageB.html

const channel = new BroadcastChannel('test_channel');

channel.postMessage( { name: 'zhangsan' } );

参考：

• https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel (opens new window)

3. 参考

• 面试官：前端跨页面通信，你知道哪些方法？ (opens new window)