Window.open()仅能触发一次的问题排查求助

应用中横幅图片点击后通过以下代码打开外部链接，首次点击正常，但返回原页面后再次点击（无论新标签页是否关闭）均无法打开，仅刷新页面后恢复，Firefox和Chrome均存在此问题：

const openWindow = async url => {
    try {
      window.open(url, '_blank').focus();
    } catch (err) {
      console.error(err);
    }
  };

问题原因 #

• 固定使用_blank作为窗口目标名时，浏览器会尝试复用已存在的同名标签页；若该标签页被关闭，部分浏览器会因上下文缓存或安全策略限制，无法重新创建新标签页。
• 不必要的async修饰符可能干扰浏览器对用户主动点击事件的判定逻辑（window.open为同步操作，async无实际作用）。

解决方案 #

方案1：生成唯一目标名，每次创建新标签页

适合需要每次打开新标签的场景，通过随机唯一的目标名避免浏览器复用旧标签：

const openWindow = url => {
  try {
    // 生成随机唯一的窗口目标名
    const uniqueTarget = `_blank_${Date.now()}_${Math.random().toString(36).slice(2)}`;
    window.open(url, uniqueTarget).focus();
  } catch (err) {
    console.error(err);
  }
};

方案2：复用未关闭标签，关闭则重建

适合需要复用标签页的场景，通过全局变量保存窗口引用，判断状态后决定聚焦或新建：

// 全局变量存储窗口引用
let bannerWindow = null;

const openWindow = url => {
  try {
    if (bannerWindow && !bannerWindow.closed) {
      // 标签页存在则聚焦
      bannerWindow.focus();
    } else {
      // 标签页不存在则新建并保存引用
      bannerWindow = window.open(url, '_blank');
      bannerWindow.focus();
    }
  } catch (err) {
    console.error(err);
  }
};

方案3：移除不必要的async修饰符

原函数的async无实际意义，移除后可消除潜在的事件判定异常：

const openWindow = url => {
  try {
    window.open(url, '_blank').focus();
  } catch (err) {
    console.error(err);
  }
};

验证 #

修改后在Firefox和Chrome中测试，多次点击横幅无论旧标签页是否关闭，均能正常打开或聚焦目标链接。

内容的提问来源于stack exchange，提问作者ipenguin67