动态销毁 iframe 并释放内存的关键在于断连接、清引用、重置状态，而非仅删除 dom 节点；需设 src 为 about:blank、置 contentwindow 为 null、清理外部事件与定时器，并确保无残留引用。
动态销毁 iframe 并释放内存，关键不在“删节点”，而在“断连接、清引用、重置状态”。直接 remove() 或 innerHTML = '' 只是移除 DOM，iframe 内部的 JS 执行环境、事件监听器、定时器、媒体资源仍可能持续占用内存，尤其在频繁切换后台页面或嵌入第三方内容时容易引发泄漏。
销毁前必须切断 iframe 内部运行环境
iframe 的 contentWindow 是独立执行上下文，即使节点被移除，其中的脚本仍可能活跃。需主动干预：
- 将 src 设为 about:blank，强制卸载当前页面并终止 JS 执行（兼容所有浏览器）
- 显式清空 contentWindow 引用：iframe.contentWindow = null（防止闭包持有 window 对象）
- 若 iframe 已加载 document，可尝试调用 iframe.contentDocument.write('') 清空内容（部分浏览器有效，非必需但可辅助）
销毁时要同步清理外部绑定资源
父页面对 iframe 的依赖不能遗漏，否则残留引用会阻止 GC：
- 移除所有通过 addEventListener 绑定在 iframe 元素上的事件（如 load、error），尤其是匿名函数需提前存名或用 AbortController 管理
- 清除与 iframe 关联的定时器（如轮询状态的 setInterval）、fetch 请求（abort signal）、MutationObserver（调用 .disconnect()）
- 若使用了第三方库封装 iframe（如沙箱容器、微前端框架），务必调用其提供的 destroy() 或 unmount() 方法
移除 DOM 节点要选对方法和时机
节点本身移除是最后一步，且需确保 DOM 层面彻底解耦：
- 优先使用 iframe.remove()（现代浏览器支持，自动解绑内联事件）
- 兼容旧环境可用 iframe.parentNode.removeChild(iframe)，但前提是 iframe 已从父节点中存在
- 避免用 parent.innerHTML = '' 清空整个容器——它会中断音频、重置表单、触发意外重绘，且无法保证 iframe 内部资源被清理
销毁后需检查是否遗留引用
内存是否真正释放，不能只看 DOM，还要确认 JS 堆中无残留：
- 在 Chrome DevTools 的 Memory 面板中拍堆快照，筛选 Closure 构造器，展开查看是否有 HTMLIFrameElement 或其 contentWindow 被意外持有
- 若 iframe 曾作为模块加载器（如通过 srcdoc 注入脚本），需确认全局变量、事件总线订阅、localStorage 监听等副作用已被清除
- 长期缓存 iframe 实例（如挂到 window.iframeCache）必须手动 delete 或设为 null，否则整棵子树无法回收
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
