如何使用 JavaScript 专注于从新选项卡打开的弹出窗口答案

【问题标题】：How to focus on opened popup window from a new tab using JavaScript如何使用 JavaScript 专注于从新选项卡打开的弹出窗口
【发布时间】：2021-04-16 08:20:17
【问题描述】：

我有一个使用 JavaScript 的 URL。当我点击该 URL 时，它将打开一个新窗口弹出窗口（window.open（）），当我从新选项卡和同一浏览器中点击相同的 URL 时，它会打开一个新窗口弹出窗口，甚至是以前的弹出窗口窗口已打开。

那么，有什么方法可以专注于已经打开的弹出窗口，而不是从同一浏览器的新选项卡中打开新的弹出窗口？

【问题讨论】：

假设您可以修改这两个站点，您可以检测到弹出窗口何时打开，但我不相信 JS 可以更改选项卡/窗口焦点（至少我希望不会，这似乎很容易被滥用)

标签： javascript

【解决方案1】：

（Un）幸运的是，似乎没有可靠的方法使窗口或选项卡成为焦点（请参阅here 或 here）。

对于您的其他问题（如果它已经打开，则不打开新的弹出窗口），您有一些基于跨窗口/标签通信的选项（假设同源）：

您可以在弹出窗口中设置一个 cookie，并在弹出窗口关闭后将其删除（或者更具体地说，unloaded）。尝试打开新弹出窗口时，请检查 cookie 是否已设置。这有一些陷阱，例如您无法控制用户打开弹出窗口的次数（手动，无需您的保护）。
您可以实现一种形式的选项卡/窗口通信（总结在this question）。

假设您可以修改弹出窗口并且它们共享相同的来源，基于Broadcast Channels 的实现可能如下所示（只是给您一个想法）：

来源：

const bc = new BroadcastChannel('channel_id');
let isPopupOpen = false;

bc.onmessage = (ev) => {
  if (ev.data === 'popup-id-exists') {
    isPopupOpen = true;
  }
};

function openPopup() {
  isPopupOpen = false;
  bc.postMessage('popup-id');
  setTimeout(() => { if (!isPopupOpen) window.open('popup.html') }, 100);
}

从弹出窗口中：

const bc = new BroadcastChannel('channel_id');
bc.onmessage = (ev) => {
  if (ev.data === 'popup-id') {
    bc.postMessage('popup-id-exists');
  }
};

【讨论】：