如何从父窗口计算新开外部窗口停留时长并监听关闭事件？

这问题我之前踩过坑！核心原因是浏览器同源策略的限制——当你打开YouTube这类外部网站时，子窗口和父窗口属于不同域名，浏览器会严格禁止父窗口直接操作子窗口的事件（比如onbeforeunload），甚至连访问子窗口的console对象都会被拦截，这就是你原代码没反应的根本原因。

不过有个绕开限制的可行方案：利用浏览器允许父窗口访问跨域子窗口的closed属性，通过轮询检测这个属性来判断窗口是否关闭，再结合打开时间戳计算停留时长。

完整实现代码 #

function trackExternalWindowStayTime(url) {
  // 记录窗口打开的精确时间戳
  const windowOpenTime = Date.now();
  // 打开目标外部窗口
  const childWindow = window.open(url);

  // 处理弹出窗口被浏览器拦截的情况
  if (!childWindow) {
    console.error('弹出窗口被浏览器拦截，请允许弹出权限');
    return;
  }

  // 设置轮询定时器，每隔500毫秒检测一次窗口状态
  const checkWindowStatus = setInterval(() => {
    // 检测子窗口是否已关闭
    if (childWindow.closed) {
      // 计算停留时长（转换为秒并保留两位小数）
      const stayDuration = (Date.now() - windowOpenTime) / 1000;
      console.log(`用户在外部窗口停留了 ${stayDuration.toFixed(2)} 秒`);
      // 清除定时器，避免不必要的性能消耗
      clearInterval(checkWindowStatus);
    }
  }, 500);
}

// 调用示例：打开YouTube并统计停留时长
trackExternalWindowStayTime('https://www.youtube.com');

关键注意事项 #

• 定时器间隔调整：500ms的间隔是平衡精准度和性能的折中选择，你可以根据需求改成1000ms（1秒），间隔越小统计越精准，但会增加少量性能开销。
• 弹出窗口拦截：部分浏览器默认拦截非用户主动触发的window.open，所以要确保你的调用是在用户点击事件（比如按钮点击）内触发的，避免被拦截。
• 适用场景限制：这个方法只适用于父窗口通过window.open主动打开的子窗口，如果是用户手动新开的窗口，父窗口拿不到引用就没法统计。

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