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

原生 API

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

演示配图

用法

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

Window.localStorage

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

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

1
2
3
4
5
// 保存值
localStorage.setItem('test', 'hello world');
// 读取值
const cat = localStorage.getItem('test');
console.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 以及端口。