window.open在Chrome与Firefox中的行为差异及同窗口唤起解决方案

需求 #

未打开目标标签页时新建标签页；若已由同一opener打开，则将该标签页前置显示（不刷新）。

原有代码及浏览器表现 #

现有代码：

const openWindow = window.open(undefined, 'WindowName');

if (openWindow.location.href === 'about:blank') {
    openWindow.location.href = newWindowUrl;
}

• Chrome表现：首次执行新建标签页并设置URL；再次执行唤起已存在窗口且不刷新。
• Firefox表现：首次执行新建标签页并设置URL；再次执行无任何操作。

问题根源 #

Firefox的行为逻辑与Chrome存在差异：当调用window.open(undefined, 'WindowName')时，若对应window.name的窗口已存在，Firefox不会返回该窗口的引用，导致后续判断openWindow.location.href的代码无法执行，自然无法触发窗口唤起操作。

解决方案 #

通过维护全局窗口引用的方式，直接管理窗口的创建与唤起逻辑，代码如下：

// 全局变量存储目标窗口的引用
let targetWindow = null;

function openOrFocusWindow(newWindowUrl) {
    // 检查窗口是否存在且未被关闭
    if (targetWindow && !targetWindow.closed) {
        // 前置显示已存在的窗口
        targetWindow.focus();
        return;
    }

    // 窗口不存在或已关闭，创建新窗口并绑定引用
    targetWindow = window.open(newWindowUrl, 'WindowName');
    
    // 处理浏览器弹窗拦截的情况
    if (!targetWindow) {
        alert('弹窗被浏览器拦截，请允许弹窗权限后重试');
    }
}

代码说明 #

1. 全局引用维护：用targetWindow保存窗口实例，避免每次调用window.open时丢失已有窗口的引用；
2. 存活检查：每次调用先判断窗口是否存活（未被关闭），存活则直接调用focus()前置显示；
3. 直接创建窗口：创建窗口时直接传入目标URL，避免原有代码中先打开空白页再跳转的冗余操作，同时规避Firefox的引用返回问题；
4. 弹窗拦截处理：添加拦截提示，提升用户体验。

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