如何检测iframe是否被父页面从DOM移除并区分可见、隐藏、移除状态

可以实现，通过组合visibilitychange事件和iframe自身上下文属性即可完成三种状态的区分，不需要父站点配合，不受跨域限制。

状态区分逻辑 #

三种状态的判断规则如下：

• 可见：document.visibilityState值为visible，且window.frameElement不为null
• 隐藏：document.visibilityState值为hidden，且window.frameElement不为null
• 被移除：window.frameElement为null（或window.isConnected为false）

完整实现代码 #

// 定义三种状态
const IFRAME_STATE = {
  VISIBLE: 'visible',
  HIDDEN: 'hidden',
  REMOVED: 'removed'
}

// 统一获取当前状态
function getIframeState() {
  // 优先判断是否被移除，不受跨域限制
  if (!window.isConnected || window.frameElement === null) {
    return IFRAME_STATE.REMOVED
  }
  // 再判断可见性
  return document.visibilityState
}

// 监听visibilitychange事件做状态变更处理
document.addEventListener('visibilitychange', () => {
  const currentState = getIframeState()
  switch(currentState) {
    case IFRAME_STATE.VISIBLE:
      // 可见状态业务逻辑
      break
    case IFRAME_STATE.HIDDEN:
      // 隐藏状态业务逻辑
      break
    case IFRAME_STATE.REMOVED:
      // 执行销毁前清理逻辑，比如清除定时器、断开长连接、上报埋点等
      doCleanup()
      break
  }
})

// 兜底逻辑：部分场景下iframe被移除可能不触发visibilitychange，用beforeunload补充监听
window.addEventListener('beforeunload', () => {
  if (getIframeState() === IFRAME_STATE.REMOVED) {
    doCleanup()
  }
})

function doCleanup() {
  // 你的清理逻辑
}

注意事项 #

• window.isConnected兼容性为Chrome 78+、Firefox 97+、Safari 15.4+，如果需要兼容更低版本浏览器，仅判断window.frameElement === null即可，该属性兼容性覆盖所有主流现代浏览器。
• 跨域场景下仅判断window.frameElement是否为null不会触发跨域报错，无需访问该属性的子属性即可正常执行判断。

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