iframe.src 重赋值会强制重建而非暂停，导致js状态丢失、重复加载；应复用节点、标记loaded状态、合理使用postmessage或reload()，并绑定业务生命周期管理。

iframe.src 重赋值会强制重建，不是暂停

直接写 iframe.src = iframe.src 看似“刷新”，实则是卸载旧上下文、新建 iframe 实例。浏览器销毁所有 JS 状态（包括播放器、表单输入、滚动位置），再完整 fetch + 渲染——这就是重复加载的根源。

常见于模态框关闭后重新打开、Tab 切换、广告位刷新等场景。YouTube iframe 尤其明显：重赋值会触发广告重播、进度丢失、跨域报错。

• 同源 iframe 可用 contentWindow.location.reload() 替代，但仅限不带参数的简单页面
• 跨域 iframe 必须用 postMessage 控制（如 YouTube 的 pauseVideo 命令）
• 若必须换地址，优先复用已有 iframe 节点，而非 document.createElement('iframe') 新建

复用 iframe 节点前必须标记 loaded 状态

iframe 加载完成 ≠ 可立即复用。没加状态标记就反复设 src，会导致多次请求、内存泄漏、跨域通信中断。

正确做法是加载成功后打标：iframe.dataset.loaded = "true"，后续切换时只改 style.display 或 src（若需跳转）。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 监听 iframe.onload 后再打标，不能只靠 isIntersecting 或定时器
• 同源下可进一步检查 iframe.contentDocument?.readyState === 'complete'
• 跨域 iframe 无法读取子页状态，只能依赖子页主动发 postMessage({ type: 'loaded' })
• Tab 切换类场景，建议预加载非活跃 tab 的 iframe 并保持 display: none，而非销毁

动态插入 iframe 时避免重复创建 DOM 节点

每次调用 document.createElement('iframe') 都会生成全新实例，即使 src 相同，浏览器也视为独立资源请求。大屏多模块场景下极易引发资源堆积和内存泄漏。

尤其在微前端、BI 图表嵌入等高频切换场景，DOM 节点应预建缓存、按需挂载。

• 用 Map 或对象缓存已创建的 iframe 节点，key 可为业务 ID（如 'dashboard-traffic'）
• 移除时用 iframe.remove()，不要用 innerHTML = ''，否则绑定事件和 sandbox 属性全丢
• 跨域 iframe 的 sandbox 属性必须在创建时一次性设全（如 sandbox="allow-scripts allow-same-origin"），后续无法补加
• 若需清空内容，用 iframe.src = 'about:blank' 比 remove() 更轻量，且保留节点引用

localStorage + URL 恢复状态时，存取时机最容易错

很多人把 iframe 当前 URL 存进 localStorage，以为下次读出来重设 src 就能“恢复”，结果常出现白屏、404 或空值——问题几乎都出在时机上。

存早了，URL 还没跳转完成；取早了，DOM 节点还没挂载，src 写不进去。

• 存：必须在子页跳转真正完成后再触发，同源用 iframe.addEventListener('load', ...)，跨域靠子页 postMessage 主动上报
• 取：不能在 DOMContentLoaded 后立刻操作，建议用 requestIdleCallback(() => { iframe.src = url }) 或 setTimeout(..., 0)
• 校验：从 localStorage 读出的 URL 必须过 new URL(url)，防止注入或相对路径解析失败
• 别依赖 keep-alive：它对 iframe 无效，组件缓存不等于浏览上下文缓存

实际中最容易被忽略的是：**iframe 的生命周期管理必须和业务状态强绑定**，而不是只盯着 src 属性。一个没 unobserve 的 IntersectionObserver、一次没清理的定时器、一个没校验的 localStorage URL，都会在用户反复切换、滚动、刷新后集中爆发。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！