如何实现仅在窗口未打开时以Tab打开，点击时聚焦而非刷新？

核心思路是结合固定窗口名称+本地存储（localStorage）+**页面通信（postMessage）**实现需求，既避免触发弹窗，又能在父窗口重启后仍定位到已打开的目标标签。

1. 父页面（触发点击的页面）代码 #

const TARGET_URL = '你的目标页面地址';
const TARGET_WIN_NAME = 'target_app_tab'; // 固定窗口名称，不要用特殊字符

function openOrFocusTarget() {
    let targetWin = window.open('', TARGET_WIN_NAME);
    
    // 成功获取到已存在的有效窗口，直接聚焦
    if (targetWin && targetWin.location.href !== 'about:blank') {
        targetWin.focus();
        return;
    }

    // 窗口引用失效（比如原窗口已关闭），先清理无效引用
    if (targetWin) {
        targetWin.close();
    }

    // 打开新标签页并绑定固定窗口名称
    targetWin = window.open(TARGET_URL, TARGET_WIN_NAME);
    // 用本地存储标记目标窗口状态，方便父窗口重启后识别
    localStorage.setItem('targetTabExists', 'true');
}

2. 目标页面（被打开的页面）代码 #

在目标页面添加以下代码，维护状态并响应聚焦请求：

const TARGET_WIN_NAME = 'target_app_tab'; // 和父窗口的名称保持一致

// 页面加载时设置固定窗口名称，确保后续能被父窗口识别
window.name = TARGET_WIN_NAME;

// 页面关闭时更新本地存储，标记窗口已关闭
window.addEventListener('unload', () => {
    localStorage.setItem('targetTabExists', 'false');
});

// 监听父窗口的聚焦请求，主动触发聚焦
window.addEventListener('message', (event) => {
    if (event.data === 'focusTargetTab') {
        window.focus();
    }
});

// 窗口激活时更新本地存储，标记窗口处于活跃状态
window.addEventListener('focus', () => {
    localStorage.setItem('targetTabExists', 'true');
});

3. 父窗口重启后的适配优化 #

如果父窗口被关闭后重新打开，原窗口引用会丢失，可通过本地存储先判断目标窗口状态，再尝试唤醒：

function openOrFocusTarget() {
    const tabExists = localStorage.getItem('targetTabExists') === 'true';
    let targetWin = window.open('', TARGET_WIN_NAME);

    // 目标窗口存在且有效，直接聚焦
    if (tabExists && targetWin && targetWin.location.href !== 'about:blank') {
        targetWin.focus();
        return;
    }

    // 清理无效引用，重新打开目标页面
    if (targetWin) targetWin.close();
    targetWin = window.open(TARGET_URL, TARGET_WIN_NAME);
    localStorage.setItem('targetTabExists', 'true');
}

关键说明 #

• 固定窗口名称：使用自定义名称而非_blank，浏览器会将同名称的请求关联到同一标签页，且不会触发弹窗（前提是不设置窗口大小、位置等弹窗属性）。
• 本地存储同步：在父窗口重启后，通过本地存储的状态标记判断目标窗口是否存活，避免重复打开。
• 页面通信：通过postMessage实现跨页面的聚焦指令传递，进一步提升窗口识别的可靠性。

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