如何检测跨域新开标签页的加载状态，实现加载完成后自动关闭

受浏览器同源策略限制，你打开的新标签页最终跳转到第三方外部站点时，父页面无法直接读取跨域页面的加载状态、DOM等信息，常规的wnd.onload事件在跨域后会失效，无法直接精准监听加载完成状态，可选择以下两种可行方案实现需求：

方案1：服务端代理触发加购（最稳定，无需打开新标签） #

如果你只需要触发加购逻辑，不需要用户在新标签页操作，可以直接通过自己的后端代理发起加购请求，完全规避跨域问题：

const shoot_3 = async (a) => {
  const addCartUrl = "https://j...g.com/shop/?add-to-cart=1575"
  // 走自研后端代理接口，将请求转发到目标加购地址
  const res = await fetch(`/api/proxy?target=${encodeURIComponent(addCartUrl)}`)
  if(res.ok) {
    alert("Add Cart!")
  }
  return false
}

方案2：必须打开新标签场景的兼容实现 #

如果业务要求必须打开新标签完成跳转流程，可以用异常判断+超时兜底的逻辑实现：

const shoot_3 = (a) => {
  const url = "https://j...g.com/shop/?add-to-cart=1575"
  const wnd = window.open(url);
  // 轮询检测跳转状态
  const checkTimer = setInterval(() => {
    try {
      // 还在同域名下时可正常访问document属性，未完成跳转则继续等待
      const testDom = wnd.document
      return
    } catch(e) {
      // 访问document抛错说明已经跳转到第三方跨域站点，加购逻辑已执行
      clearInterval(checkTimer)
      alert("Add Cart!")
      wnd.close()
    }
  }, 300)
  // 10秒超时兜底，避免异常场景下定时器一直运行、标签无法关闭
  setTimeout(() => {
    clearInterval(checkTimer)
    if(!wnd.closed) wnd.close()
  }, 10000)
  return false;        
}

• 逻辑说明：新标签页停留在你的自有域名下时，父页面可正常访问其document属性，一旦完成跳转进入第三方站点触发跨域限制，访问该属性就会抛出异常，以此判断跳转流程完成，实现触发逻辑。

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