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相关的文章即可