Chrome中监听子窗口关闭/导航离开的JavaScript回调问题

核心问题在于跨域限制：你的页面与shop.app属于不同域名，浏览器的同源策略会阻止你直接监听子窗口的unload/beforeunload等事件，这也是你之前的代码无法正常触发关闭事件的原因。以下是两种可行的实现方案：

方案1：通过postMessage主动通知（推荐，需控制结账页面） #

如果你的Shopify店铺支持在结账页面添加自定义脚本（比如Shopify Plus的结账自定义权限、或通过后台设置注入脚本），这是最可靠的方式：

1. 在结账成功页面（如Shopify订单确认页）添加脚本，向父窗口发送成功信号：

// 结账成功页面的自定义脚本
if (window.opener) {
  // 发送结账成功消息，可携带订单ID等必要信息
  window.opener.postMessage(
    { type: 'checkoutSuccess', orderId: 'ORDER_ID_HERE' },
    '父页面域名' // 替换成你的父页面域名，比如'https://your-site.com'，提升安全性
  );
  // 可选：自动关闭结账窗口
  window.close();
}

2. 父窗口监听message事件，处理用户资料更新：

let proxy = window.open(
  buyUrl,
  "child",
  "toolbar=no,location=no,directories=no,status=no,menubar=no,titlebar=no,fullscreen=no,scrollbars=1,resizable=no,width=430,height=220,left=500,top=100"
);

// 监听子窗口发来的消息
window.addEventListener('message', (event) => {
  // 严格验证来源，防止恶意消息
  if (event.origin.includes('shop.app')) {
    if (event.data.type === 'checkoutSuccess') {
      // 调用API更新用户资料
      console.log('结账成功，开始更新用户资料:', event.data.orderId);
      // updateUserProfile(event.data.orderId); // 替换为你的API调用逻辑
      
      // 可选：手动关闭子窗口
      if (proxy && !proxy.closed) {
        proxy.close();
      }
    }
  }
});

方案2：轮询检测窗口状态（无法控制结账页面时） #

如果无法修改结账页面代码，只能通过轮询检测子窗口的closed属性来判断窗口是否关闭，这是跨域场景下的折中方案：

let proxy = window.open(
  buyUrl,
  "child",
  "toolbar=no,location=no,directories=no,status=no,menubar=no,titlebar=no,fullscreen=no,scrollbars=1,resizable=no,width=430,height=220,left=500,top=100"
);

// 设置轮询定时器，每隔1秒检测一次窗口状态
const checkInterval = setInterval(() => {
  if (proxy && proxy.closed) {
    console.log('结账窗口已关闭');
    // 调用API更新用户资料
    // updateUserProfile();
    
    // 清除定时器，避免内存泄漏
    clearInterval(checkInterval);
  }
}, 1000);

// 父窗口关闭时清除定时器
window.addEventListener('unload', () => {
  clearInterval(checkInterval);
});

关键提示 #

• 跨域限制是浏览器的安全机制，不同源窗口仅允许访问closed属性和通过postMessage通信，旧的事件监听方法在跨域场景下必然失效。
• 轮询方案无法区分用户是结账成功关闭窗口还是中途取消，但如果业务逻辑允许“窗口关闭即触发更新”（或结合订单状态接口二次验证），可满足需求。
• 使用postMessage时务必验证event.origin，避免接收恶意域名的消息，防止XSS攻击。

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