先查network面板initiator列定位触发dom插入的js代码，再重点检查innerhtml+=、重复调用注入函数、框架接管冲突及广告sdk重试未防重等问题。
页面中突然多出两个相同广告位，怎么定位是哪段 JS 在重复插入
直接看 Network 面板里的 Initiator 列——它会明确标出触发每个请求的 JS 调用栈。重点不是查“谁发了请求”，而是查“谁触发了 DOM 插入”，因为资源重试本身不直接导致节点重复，真正造成重复的是插入逻辑被多次执行。
- 在 Chrome DevTools 的 Network 面板开启「Preserve log」，刷新页面，找到重复出现的广告 iframe 请求
- 点击该请求 → 右侧 Headers 标签页往下拉，找到
Initiator字段，点进去跳转到对应 JS 行 - 如果 Initiator 显示为
eval或压缩后的匿名函数，就往上翻调用栈，找最靠近顶层的、你可控的函数名（比如injectAd、renderBanner） - 不要只盯着第三方脚本，检查你自己页面里是否在
DOMContentLoaded和window.onload里都调用了同一插入函数
innerHTML += '...' 导致广告 iframe 被反复追加的坑
innerHTML += 看似简单，实则是 DOM 重复插入的高发操作。它每次执行都会先读取当前 innerHTML 字符串，再拼接新内容，最后整个替换——这会销毁原有节点、清空事件监听器，并让浏览器重新解析 HTML，极易引发副作用。
- 写法
container.innerHTML += '<iframe src="ad.js"></iframe>'：只要该语句被执行两次，就会插入两个 iframe - 更隐蔽的情况：第三方 SDK 内部也用了类似逻辑，而你又在初始化时手动调了一次，等于双倍触发
- 替代方案：用
document.createElement('iframe')+appendChild()，或封装成“只插入一次”的幂等逻辑，例如加data-injected="true"标记并提前判断 - 注意：
insertAdjacentHTML('beforeend', ...)比innerHTML +=稍安全，但依然不解决重复问题，只是避免重建整个容器结构
DOM 插入后又被 JS 框架二次渲染，怎么确认是不是 React/Vue 在“抢节点”
如果你页面同时存在原生 JS 插入和前端框架接管的区域，框架的 diff 算法可能把原生插入的节点识别为“脏节点”而覆盖或复制——这不是 bug，而是 DOM 所有权冲突。
- 检查目标容器是否被框架的
root或el配置覆盖，比如new Vue({ el: '#container' })会让 Vue 完全控制该节点及其子树 - 打开 Elements 面板，右键目标 iframe → 「Break on > subtree modifications」，然后刷新，看断点停在哪段代码上
- 若断点停在框架内部（如
patch、hydrate），说明是框架在重写 DOM；此时应改用框架提供的插槽（slot）或指令（如v-html）注入广告，而非原生操作 - 临时验证方法：注释掉框架初始化代码，只留原生插入逻辑，观察是否还重复——能快速区分责任边界
广告 SDK 自动重试时未做防重逻辑，如何给插入动作加锁
很多第三方广告 SDK 在加载失败后会自动重试，但它们的插入函数往往没做幂等保护。你不能改 SDK，但可以在调用层拦截。
- 用闭包变量记录是否已插入：
let injected = false; if (!injected) { injectAd(); injected = true; } - 更健壮的做法是检查 DOM 中是否已有对应广告节点：
if (!document.querySelector('iframe[src*="ad-domain.com"]')) { injectAd(); } - 避免用
id判断——第三方常动态生成 ID，不可靠；优先用src特征、data-ad-type属性或固定 class 名 - 注意时序：不要在
onload回调里直接插入，而应在广告脚本load事件后、且确保 DOM 就绪后再执行插入
真正麻烦的不是插入动作本身，而是插入时机和上下文混杂：SDK 重试、框架接管、手动初始化、缓存失效 reload —— 这些信号一旦没对齐，appendChild 就会变成“appendTwice”。排查时别只盯代码行，要盯住每个插入动作背后的触发条件是否唯一。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
