js跨标签页通信

2022-09-25

跨标签页通信

网页需要用到跨标签页通信的场景一般较少,这里简单记录一下,这里建议使用方法三

方法一

通过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允许浏览上下文(即windowstabsframesiframes)和同一来源的工作人员之间的基本通信。

通过创建一个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.");

兼容性:

image-20220925181002883

方法四

通过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条):