浏览器选项卡知道它何时被复制

Ian*_*n S 2 javascript duplicates browser-tab typescript angular

我希望我的浏览器选项卡知道它何时被复制。

我见过的唯一类似的解决方案只关注知道它已被重复的重复选项卡或知道它已被重复的原始选项卡,但这仅适用于 Chrome。

要求:

  • 解决方案适用于所有现代浏览器

奖金如果解决方案:

  • 适用于 Internet Explorer 版本
  • 使用一些原生 Angular 功能

Ran*_*h J 5

您可以使用广播频道API 。

  1. 加载时创建通道并广播消息
  2. 使用onmessage事件,捕获消息,如果它与初始消息匹配,则广播另一消息
  3. 重复标签将接收第二个广播,而第一个标签将接收第一个广播

 const broadcast = new BroadcastChannel('test')
    broadcast.postMessage('I am First');
    broadcast.onmessage = (event) => {
      if (event.data === "I am First") {
        broadcast.postMessage(`Sorry! Already open`);
        alert("First Tab");
      }
      if (event.data === `Sorry! Already open`) {
        alert("Duplicate Tab");
      }
    };
Run Code Online (Sandbox Code Playgroud)