如何通过window.open()或其他方法在新打开网页中显示计数器

需求：点击按钮打开新标签页加载指定网站，仅在通过该按钮打开的页面显示计数器，实时展示用户停留时长；同时设置30秒超时，到时自动关闭新标签页并跳转回指定页面。

原代码问题说明 #

原实现存在明显缺陷：每秒都会创建一个新的计时器DOM元素，导致页面堆积大量重复的计时标题，严重影响页面体验。以下是修正后的完整实现：

function openTask(url, taskId) {
    // 打开携带task标识的新标签页
    const newTab = window.open(`${url}?task=${taskId}`, "_blank");
    const startTime = Date.now();
    let timerElement = null;

    const interval = setInterval(() => {
        const elapsedTime = Date.now() - startTime;
        const secondsSpent = Math.floor(elapsedTime / 1000);

        // 检查新标签页状态：未关闭且DOM已加载完成
        if (newTab && !newTab.closed && newTab.document.body) {
            // 仅在计时器元素不存在时创建
            if (!timerElement) {
                timerElement = newTab.document.createElement("div");
                timerElement.innerHTML = `<h1 style='position: fixed; top: 10px; right: 10px; background-color: white; z-index: 9999; margin: 0; padding: 8px 12px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);'>Time Spent: ${secondsSpent} seconds</h1>`;
                newTab.document.body.appendChild(timerElement);
            } else {
                // 已存在则仅更新时长内容
                timerElement.querySelector("h1").textContent = `Time Spent: ${secondsSpent} seconds`;
            }
        }

        // 30秒超时处理逻辑
        if (elapsedTime >= 30000) {
            clearInterval(interval);
            if (!newTab.closed) {
                newTab.close();
            }
            window.location.href = "https://mywebsite.com";
        }
    }, 1000);
}

关键实现细节 #

• 来源标识：通过URL拼接task=${taskId}参数，标记页面是通过指定按钮打开的（后续可在目标页面通过URL参数进一步校验，确保计时器仅在该场景触发）
• DOM优化：用变量缓存计时器元素，避免每秒重复创建DOM节点，提升性能
• 状态校验：每次执行定时器时，先确认新标签页未关闭且DOM已加载，避免操作不存在的页面报错
• 超时自动处理：达到30秒时清除定时器，关闭新标签页并跳转回指定页面

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