移除iframe后如何清除其残留运行的JavaScript脚本？

• 先清理iframe内部资源再移除元素
  在删掉iframe之前，主动切断它里面可能持续运行的任务和连接：

  // 获取iframe的window对象
  const iframeWindow = iframe.contentWindow;
  // 批量清除定时器（覆盖常见的定时器ID范围）
  for (let i = 0; i < 1000; i++) {
    clearTimeout(i);
    clearInterval(i);
  }
  // 移除全局事件监听（示例：移除scroll事件）
  iframeWindow.removeEventListener('scroll', someScrollHandler);
  // 关闭WebSocket等持久连接
  if (iframeWindow.ws) {
    iframeWindow.ws.close();
  }
  // 最后移除iframe元素
  iframe.remove();
  

  这种方式能主动掐断大部分让脚本“赖着不走”的源头，减少内存泄漏。

• 重置iframe的src为空白页
  在移除前把iframe的src换成about:blank，让浏览器销毁原页面的脚本上下文：

  iframe.src = 'about:blank';
  // 等浏览器完成上下文切换后再移除
  setTimeout(() => {
    iframe.remove();
  }, 0);
  

  加载空白页会替换原iframe的文档，原页面的脚本环境会被彻底销毁，内存也会被浏览器回收。

• 在iframe源页面加卸载清理逻辑
  直接在iframe的源页面里加unload事件监听，页面被卸载时自行清理资源：

  // 这段代码写在iframe的源页面中
  window.addEventListener('unload', () => {
    // 清除定时器、关闭连接、移除事件监听
    clearInterval(timerId);
    ws?.close();
    document.removeEventListener('click', clickHandler);
  });
  

  当iframe被移除或src被替换时，unload事件会触发，内部脚本自己完成资源清理。

• 清理主页面与iframe的关联引用
  如果主页面和iframe有postMessage通信，要及时移除主页面的message监听，别让主页面持有iframe内对象的引用——不然iframe的上下文会被“挂住”，没法被垃圾回收：

  // 主页面中移除对iframe消息的监听
  window.removeEventListener('message', iframeMessageHandler);
  

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