如何在Ext JS 3.4中捕获新打开浏览器标签的关闭事件？

我之前在Ext JS 3.x项目里碰到过一模一样的问题——因为浏览器的安全限制，没法在原应用（父页面）直接监听新标签页的关闭事件，你试过的focus/blur只能检测焦点切换，unload是父页面自己卸载时触发，确实都不适用。目前最可靠的方案是定期轮询新窗口的closed属性，兼容Ext JS 3.4，具体实现如下：

具体步骤 #

1. 保存新窗口的引用
   不管你是用原生window.open还是Ext JS组件（比如按钮）打开新标签页，一定要保存返回的窗口对象，这是后续检查的关键：

   var newTabWindow; // 全局或闭包内保存窗口引用
   
   // 示例：按钮点击事件中打开新标签页
   Ext.getCmp('your-open-tab-btn').on('click', function() {
       // 替换成你的目标链接
       newTabWindow = window.open('/your-target-url', '_blank');
       
       // 处理浏览器拦截弹窗的情况
       if (!newTabWindow) {
           Ext.MessageBox.alert('提示', '新窗口被浏览器拦截，请允许弹出权限');
           return;
       }
       
       // 启动关闭状态检查
       startCloseMonitor();
   });
   

2. 启动轮询监控窗口状态
   在原应用中创建一个定时器，每隔一段时间检查新窗口的closed属性，一旦检测到窗口关闭，就执行你的提示逻辑并清除定时器：

   function startCloseMonitor() {
       var checkInterval = setInterval(function() {
           // 确认窗口引用存在且已关闭
           if (newTabWindow && newTabWindow.closed) {
               // 这里写你的提示逻辑，比如Ext JS的弹窗
               Ext.MessageBox.info('提示', '新标签页已经关闭啦');
               
               // 清除定时器，避免无用轮询
               clearInterval(checkInterval);
               // 清空引用，避免内存泄漏
               newTabWindow = null;
           }
       }, 500); // 每隔500ms检查一次，可根据需求调整（比如1000ms）
   }
   

关键细节说明 #

• 兼容性：这个方案几乎兼容所有现代浏览器，即使新标签页是跨域链接也能生效——因为浏览器允许父页面访问新窗口的closed属性，不受同源策略限制。
• 边界处理：一定要处理浏览器拦截新窗口的情况（newTabWindow为null），给用户明确提示；如果父页面被刷新，定时器会失效，这是正常的页面状态重置行为。

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