js跨标签页通信
跨标签页通信
网页需要用到跨标签页通信的场景一般较少,这里简单记录一下,这里建议使用方法三
方法一
通过localStorage
结合window.addEventListener(‘storage’, cb)完成A、B标签页间通信。
下面是实现A标签页面修改B标签页面title的例子:
// A标签页
localStorage.setItem('tab:msg', JSON.stringify({
type: 'changeTitle',
data: '改个title'
}))
// B标签页
window.addEventListener('storage', (ev) => {
try {
const msg = JSON.parse(ev.newValue)
if (msg.type === 'changeTitle') {
window.document.title = msg.data
}
} catch (err) {}
})
方法二
通过cookie+setInterval 定时获取cookie的值变化,该方法和方法一类似,不过没有方法一好,这里不作例子
方法三
通过BroadcastChannel
进行页面间通信,该方法实现简单,兼容性也算可以,是建议使用的方式
Broadcast Channel API允许浏览上下文(即windows、tabs、frames或iframes)和同一来源的工作人员之间的基本通信。
通过创建一个
BroadcastChannel
对象,您可以接收发布到它的任何消息。您不必维护对您希望与之通信的框架或工作人员的引用:他们可以通过构建自己BroadcastChannel
的同名频道来“订阅”特定频道,并在所有频道之间进行双向通信。
例子:
// A页面
const bc = new BroadcastChannel("test_channel");
bc.onmessage = (event) => {
console.log(event);
};
// B页面
const bc = new BroadcastChannel("test_channel");
bc.postMessage("This is a test message.");
兼容性:
方法四
通过SharedWorker
做媒介进行不同标签间通信
SharedWorker
接口代表一种特定类型的 worker,可以从几个浏览上下文中访问,例如几个窗口、iframe 或其他 worker。它们实现一个不同于普通 worker 的接口,具有不同的全局作用域。
例子:
// worker.js
var clients = [];
onconnect = function(e) {
var port = e.ports[0];
clients.push(port);
port.addEventListener("message", function(e) {
for (var i = 0; i < clients.length; i++) {
var eElement = clients[i];
eElement.postMessage(e.data);
}
});
port.start();
};
// A页面
const shareWorker = new SharedWorker("worker.js");
// 接受信息
shareWorker.port.onmessage = (e)=> {
console.log(e.data)
}
// B页面
const shareWorker = new SharedWorker("worker.js");
// 发送信息
shareWorker.port.postMessage({
type : 'notifyTab',
payload : {}
});
方法五
通过websocket进行页面间通信,该方式需要借助服务器,且较重,除非业务需要,不然接入成本较高。
好处就是可以跨浏览器通信了哈哈哈哈。这里不细说,毕竟用到这个的话业务肯定不简单了,看websocket相关的文章即可
评论(0条):