存储的Window对象属性变为undefined问题排查问询

问题诱因 #

该报错的核心原因是已销毁的全局执行上下文对应的Window对象会被浏览器做属性剥离，触发该场景的常见路径有3种：

• 持有了已卸载iframe的window引用：当iframe被从DOM树移除后，浏览器会异步销毁其执行上下文，此时留存的window引用是仅保留空对象壳子的「僵尸对象」，所有原生属性、方法、构造函数都会被置为undefined
• 页面卸载阶段的异步逻辑执行：在beforeunload、unload事件触发后，浏览器会逐步清理全局上下文的绑定，此时如果有未执行完成的异步回调（定时器、网络请求回调、异步任务等）被触发，访问window属性就会碰到已被清理的内容
• 后台标签页强制资源回收：当标签页长期驻留后台被系统强制冻结回收资源后，若之前注册的异步任务被唤醒执行，也会拿到属性已被清空的window对象

复现方案 #

通过iframe卸载场景可稳定复现：

// 创建动态iframe
const iframe = document.createElement('iframe')
iframe.src = 'about:blank'
document.body.appendChild(iframe)
const currentWindow = iframe.contentWindow

iframe.onload = () => {
  // 移除iframe触发上下文销毁
  document.body.removeChild(iframe)
  // 延迟访问即可复现报错
  setTimeout(() => {
    console.log(currentWindow.HTMLElement) // 输出undefined
    console.log(currentWindow.removeListener) // 输出undefined
  }, 50)
}

主窗口场景复现方式：

const currentWindow = window
window.addEventListener('beforeunload', () => {
  // 注册微任务，在卸载流程中执行
  queueMicrotask(() => {
    console.log(currentWindow.HTMLElement) // 输出undefined
  })
})
// 主动刷新页面即可触发

修复思路 #

从校验和规避两个维度处理即可彻底解决：

• 封装统一的window存活校验方法，所有访问currentWindow属性的位置先做校验

const isWindowActive = (win) => {
  // 校验核心属性是否存在，可根据业务使用的属性增加校验项
  return win && typeof win.HTMLElement === 'function' && typeof win.removeListener === 'function'
}

// 调用前先校验
if (isWindowActive(currentWindow)) {
  const isHtmlElement = element instanceof currentWindow.HTMLElement
  currentWindow.removeListener('eventName', handler)
}

• 增加页面卸载状态拦截，卸载后不再执行任何访问window的异步逻辑

let isPageUnloading = false
window.addEventListener('beforeunload', () => {
  isPageUnloading = true
})

// 所有异步逻辑入口先判断
if (!isPageUnloading && isWindowActive(currentWindow)) {
  // 执行业务逻辑
}

• 若currentWindow指向iframe，额外监听iframe的unload事件，触发时清空持有的引用并移除所有绑定的事件监听，避免后续误访问。

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