Question

有没有办法检测是否为同一个应用程序打开了多个浏览器选项卡。

假设我有www.test.com，我打开了这个网站的4个标签。

有没有办法检测在JavaScript中打开多个标签？

Answer 1

您可以使用我的sysend.js library，它使用localStorage在打开的标签/窗口之间发送消息。所有要做的就是这段代码：

sysend.on('notification', function() {
   sysend.broadcast('multiple');
});
sysend.on('multiple', function() {
   // this will fire n-1 times if there are n tabs open if n > 1
   alert('multiple pages');
});
sysend.broadcast('notification');

JSFIDDLE

Answer 2

有，但不保证永远是正确的：

window.onload = function() {
  var applicationCount = localStorage.getItem("applicationCount");
  if (!applicationCount) {
    applicationCount = 0;
  }
  localStorage.setItem("applicationCount", ++applicationCount);
}

window.onbeforeunload = function(e) {
  var applicationCount = localStorage.getItem("applicationCount");
  if (!applicationCount) {
    applicationCount = 1;
  }
  localStorage.setItem("applicationCount", --applicationCount);
};

它使用在选项卡之间共享的localStorage。但请注意，如果浏览器崩溃，则仍会保存该值。

Answer 3

在此处查看我的完整答案：https://stackoverflow.com/a/62231610/2661938

我们可以利用Broadcast Channel API，只要这两个上下文来自同一来源，它就可以跨浏览上下文（窗口，标签，框架或iframe）进行通信。

一个简单的实现，可以从第一个选项卡检测第二个选项卡加载网站：

//in entry point of your app (index.js)    

const channel = new BroadcastChannel('tab');

channel.postMessage('another-tab');
// note that listener is added after posting the message

channel.addEventListener('message', (msg) => {
  if (msg === 'another-tab') {
    // message received from 2nd tab
    alert('Another tab is open');
  }
});

在javascript中检测同一应用程序打开的多个chrome标签

3 个答案: