如何检测window.open打开的标签页状态并在其关闭/刷新时调用API

核心思路 #

要实现需求，需要分新窗口内部监听和主页面状态检测两种场景处理：前者能覆盖刷新和关闭操作，后者仅能检测关闭状态。

1. 在新窗口内部监听刷新/关闭事件 #

直接给新创建的窗口绑定beforeunload或unload事件，这是最可靠的方式，能捕获刷新、关闭等页面卸载行为。

代码实现（结合你的创建逻辑）

const newWindow = window.open("", "_blank", "width=800,height=600,left=2000,top=0");

if (newWindow) {
  // 将目标div内容写入新窗口
  const specificDivContent = document.getElementById(`slide-${slideIndex}`).innerHTML;
  newWindow.document.body.innerHTML = specificDivContent;

  // 监听页面卸载事件（刷新/关闭都会触发）
  newWindow.addEventListener("unload", () => {
    // 使用sendBeacon保证请求可靠发送（浏览器后台处理，不阻塞页面卸载）
    const payload = JSON.stringify({
      action: "window-unloaded",
      slideId: `slide-${slideIndex}`
    });
    navigator.sendBeacon("/your-api-endpoint", payload);
  });

  // 若需要在卸载前提示用户，可使用beforeunload（注意不要滥用preventDefault）
  newWindow.addEventListener("beforeunload", (event) => {
    // 可选：弹出确认提示框（部分浏览器可能忽略）
    // event.returnValue = "确定要离开吗？";
    // 同步执行API调用（异步操作可能被中断）
    fetch("/your-api-endpoint", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ action: "window-about-to-unload" })
    });
  });
}

关键说明

• unload事件：页面完全卸载时触发，适合用navigator.sendBeacon发送API请求，浏览器会确保请求完成，不会因页面关闭中断。
• beforeunload事件：页面即将卸载时触发，若需阻止用户关闭/刷新，可设置event.returnValue，但仅同步操作能保证执行，异步请求可能被浏览器拦截。

2. 主页面检测新窗口是否关闭 #

如果需要在主页面感知新窗口关闭并调用API，可通过定时检查newWindow.closed属性实现，但无法检测刷新（刷新后窗口仍存在，closed为false）。

代码实现

const newWindow = window.open("", "_blank", "width=800,height=600,left=2000,top=0");

if (newWindow) {
  // 写入div内容...

  // 定时检查窗口状态
  const checkInterval = setInterval(() => {
    if (newWindow.closed) {
      console.log("新窗口已关闭");
      // 调用API
      fetch("/your-api-endpoint", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ action: "window-closed" })
      });
      clearInterval(checkInterval); // 关闭窗口后停止检查
    }
  }, 1000); // 每秒检查一次
}

注意事项 #

• 跨域限制：若新窗口与主页面不同域，将无法访问新窗口的document或绑定事件，需确保同域或配置CORS。
• 浏览器弹窗拦截：window.open必须在用户主动交互（如点击事件）中调用，否则会被浏览器拦截。
• API可靠性：优先使用navigator.sendBeacon替代fetch/XMLHttpRequest处理卸载时的请求，避免被浏览器中断。

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