检测多个打开的选项卡...并关闭最新标签！ （通过BroadcastChannel API）

Question

我已经将此功能放在负载上，因此我可以检测一个新的选项卡：

function checkNewTabs() {
  const channel = new BroadcastChannel('tab');
  channel.postMessage('newTab');
  channel.addEventListener('message', (msg) => {
    if (msg.data === 'newTab') {
      alert('Please don't open more than one tab at a time!');
      //window.open('', '_self', '').close();
    }
  });
}

我希望能够将消息发送回新选项卡：

channel.postMessage('callbackNewTab');
channel.addEventListener('message', (msgBack) => {
  if (msgBack.data === 'callbackNewTab') {
    alert('This tab will be closed!');
    window.open('', '_self', '').close();
  }
});

为了关闭新标签...

我可以为旧标签，但我真正需要的是关闭新标签！

有人可以帮我吗？ tks！ :)

Answer 1

解决两个选项卡的解决方案。有关更多选项卡，需要一些主 /从索引。

const EVENT_NEW_TAB = "newTabOpened";
const EVENT_CLOSE_TAB = "needCloseThisTab";

const CHANNEL_NAME = "tab";

const channel = new BroadcastChannel(CHANNEL_NAME);
channel.onmessage = (event) =>
{
    let data = event.data;

    switch (data)
    {
        case EVENT_NEW_TAB:
            onNewTabOpened();
            break;
        case EVENT_CLOSE_TAB:
            onNeedCloseThisTab();
            break;
    }
}

function onNewTabOpened()
{
    channel.postMessage(EVENT_CLOSE_TAB);  // Send message to second tab
}

function onNeedCloseThisTab()
{
    alert('This tab will be closed!');

    window.open("about:blank", "_self").close(); // Need some hack
}

function onPageLoad()
{
    channel.postMessage(EVENT_NEW_TAB); // Send message to first tab
}

window.onload = () =>
{
    onPageLoad();
};