使用 WebSocket
-
无跨域限制
-
需要服务端支持，成本高
通过 localStorage
-
同域的 A 和 B 两个页面
-
A 页面设置 localStorage
-
B 页面可以监听到 localStorage 值的修改
案例
// A 页面
window.addEventListener("storage", event => {
console.log(event.key);
console.log(event.newValue);
})
// B 页面
<button id="btn1">修改标题</button>
<script>
const btn1 = document.getElementById("btn1");
btn1.addEventListener("click", () => {
const newInfo = {
id: 100,
name: `标题${Date.now()}`
}
localStorage.setItem("changeInfo", JSON.stringify(newInfo));
})
</script>
通过 SharedWorker 通讯
-
SharedWorker 是 WebWorker 的一种
-
WebWorker 可开启子进程执行 JS，但不能操作 DOM
-
SharedWorker 可单独开启一个进程，用于同域页面通讯
