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