You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多
文档控制台
免费开始使用

Edge浏览器跨域子窗口window.closed始终为true问题求助

第三方子窗口关闭检测:Edge浏览器Bug的兼容处理方案

我懂你现在碰到的这个棘手问题了——打开第三方站点的子窗口后,完全没法控制对方的内容,只能靠轮询window.closed属性来判断窗口状态,但偏偏Edge浏览器这里存在一个已确认的Bug,导致这个检测逻辑可能失效。

先把你当前的代码整理清楚,再聊聊针对Edge这个Bug的实用兼容方案:

你的当前实现代码

var myWindow = window.open(url, 'myWindow', 'height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=yes');

// 检测子窗口是否关闭的轮询逻辑
var checkWindowClosed = setInterval(function() {
  if (myWindow && myWindow.closed) {
    clearInterval(checkWindowClosed);
    // 这里写窗口关闭后要执行的内容
    console.log('子窗口已关闭,执行后续逻辑');
  }
}, 500);

Edge浏览器的Bug背景

Edge中存在已确认的问题:当子窗口加载的是第三方跨域站点时,window.closed属性可能无法正确更新,导致你的轮询逻辑一直判断错误,没法触发关闭后的操作。这是浏览器层面的问题,暂时没有官方修复,但我们可以通过一些小技巧来兼容。

针对Edge Bug的兼容方案

1. 增加异常捕获,处理跨域访问错误

在轮询时加上try-catch块,当Edge因为Bug导致访问myWindow.closed报错时,直接默认窗口已关闭,避免脚本中断:

var checkWindowClosed = setInterval(function() {
  try {
    if (myWindow && myWindow.closed) {
      clearInterval(checkWindowClosed);
      // 窗口关闭后的业务逻辑
    }
  } catch (e) {
    // Edge下出现异常,判定窗口已关闭
    clearInterval(checkWindowClosed);
    // 执行关闭后的逻辑
  }
}, 500);

2. 结合主窗口焦点事件辅助检测

当用户关闭子窗口后,主窗口会重新获得焦点,我们可以利用这个事件额外做一次状态检查,弥补轮询的不足:

window.addEventListener('focus', function() {
  if (myWindow) {
    try {
      // 尝试访问子窗口的属性,若跨域报错则说明窗口已无法访问
      void myWindow.location.href;
    } catch (e) {
      clearInterval(checkWindowClosed);
      // 执行关闭后的逻辑
    }
  }
});

需要说明的是,由于跨域限制,我们没法直接监听第三方子窗口的unload事件,所以轮询还是最基础的方案,加上这两个兼容处理就能很好地覆盖Edge的Bug场景了。

内容的提问来源于stack exchange,提问作者Robert Young

火山引擎 最新活动