浏览器同源页面通信方法记录

ZeroNumber

2022-04-28

2 minute read

javascript

原生 API

Broadcast Channel API 允许同源的浏览器上下文（windows、tabs、frames或iframes）之间的简单通信。

演示配图

用法

 1// 新建通道
 2let bc = new BroadcastChannel('[ 通道名称 ]');
 3// 发送消息
 4bc.postMessage('[ 消息内容 ]');
 5// 接收消息
 6bc.onmessage = function(ev) {
 7    console.info(ev);
 8}
 9// 关闭通道
10bc.close();

Window.localStorage

只读的 localStorage 属性允许访问一个 Document 源（origin）的对象 Storage，存储的数据将保存在浏览器会话中。通过一个页面写入另一页面读取的方式也可实现同源跨页面通信。

TODO：localStorage 类似 sessionStorage，其区别在于存储在 localStorage 的数据可以长期保留；而当页面会话结束时，存储在 sessionStorage 的数据会被清除。

1// 保存值
2localStorage.setItem('test', 'hello world');
3// 读取值
4const cat = localStorage.getItem('test');
5console.info(cat);

SharedWorker

SharedWorker 接口代表一种特定类型的 worker，可以从几个浏览上下文中访问，例如几个窗口、iframe 或其他 worker。根据其特性也可用于实现同源跨页面通信，只是相对其他实现相对麻烦，需仔细了解其原理及使用方法，一般人把握不住。

通过读写 Cookie 亦可实现同源跨页面通信，实现思路与使用 Window.localStorage 方式实现基本一致。总体来说除非别无选择，否则并不推荐这种方式。

其他信息

Broadcast Channel API: https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API

window.localStorage: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage

SharedWorker：https://developer.mozilla.org/zh-CN/docs/Web/API/SharedWorker

同源：相同的协议、host 以及端口。