IE11中unload事件监听器内alert无法显示问题求助

问题重现 #

开发兼容IE的应用时，遇到以下问题：

• 在unload事件监听器中调用alert()无法弹出提示框
• alert()在监听器外、浏览器控制台中均可正常工作
• console.log()在unload事件内能够正常输出
• 浏览器已启用JavaScript弹窗权限

相关代码片段：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />

    <title>IE App</title>
  </head>
  <body>
    <h3>I am IE Compatible app.</h3>
    <div id="demo"></div>

    <script>
      document.getElementById("demo").innerHTML = "Javascript is enabled";
      window.addEventListener('unload', function(event) {
       alert('Unload event from IE Modal');
      });
    </script>
  </body>
</html>

原因解析 #

1. IE对unload事件的行为限制
   IE浏览器在unload事件执行阶段，会主动阻止alert()、confirm()这类模态弹窗的显示。这是因为unload触发时页面已进入卸载流程，浏览器需要保证页面能顺利关闭或跳转，而模态弹窗会阻塞这个流程，因此IE直接禁用了这类弹窗在unload中的执行。

2. 事件执行时机的特性
   unload是页面生命周期的最后阶段，此时DOM已开始销毁、浏览器资源正在回收，IE的JS引擎会限制所有可能导致卸载延迟的操作，模态弹窗属于典型的被限制操作；而console.log()这类无阻塞的输出操作不受影响。

3. 兼容性差异
   其他现代浏览器虽也有类似限制，但IE的规则更为严格，且会静默忽略alert()调用，无任何报错提示。

替代方案 #

如果需要在页面卸载时和用户交互，可采用以下方式：

• 使用beforeunload事件：该事件在页面即将卸载前触发，IE支持通过返回字符串触发浏览器默认的确认弹窗（无法自定义弹窗内容），示例：

  window.addEventListener('beforeunload', function(event) {
    event.returnValue = '确定要离开此页面吗？';
    return event.returnValue;
  });
  

• 避免在unload中做交互操作：若需执行逻辑，尽量改为无交互的后台操作（如发送beacon请求），不要依赖用户弹窗确认。

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