如何使用JavaScript从一个新标签集中关注打开的弹出窗口

Question

我有一个使用JavaScript的URL。当我点击该URL时，它将打开一个新的弹出窗口(window.open(((，当我从新标签和同一浏览器上点击同一URL时，即使以前的弹出窗口已经打开，它也会打开一个弹出窗口。

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

Answer 1

(Un(幸运的是，似乎没有可靠的方法来聚焦窗口或选项卡(请参阅此处或此处(。

对于您的另一个问题(如果已经打开，则不打开新的弹出窗口(，您有一些基于跨窗口/选项卡通信的选项(假设来源相同(：

• 您可以在弹出窗口中设置cookie，并在弹出窗口关闭(或更具体地说卸载(后将其删除。当试图打开一个新的弹出窗口时，请检查cookie是否已设置。这有一些陷阱，比如你无法控制用户打开弹出窗口的次数(手动，没有你的保护(
• 您可以实现一种选项卡/窗口通信形式(在本问题中总结(

---

假设你可以修改弹出窗口，并且它们共享相同的来源，基于广播频道的实现可能看起来像这样(只是给你一个想法(：

来源：

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');
}
};