IFrame加载后appendChild添加元素丢失且AddIFrameIncludes重复调用问题

嘿，我来帮你拆解这两个头疼的问题，结合你描述的现象，大概率是iframe的load事件触发逻辑和文档上下文的问题搞的鬼：

问题一：AddIFrameIncludes被调用两次（仅绑定一次事件监听） #

可能的原因 #

iframe的load事件比你想象的更容易重复触发：

• 如果你加载的内容存在重定向（比如从HTTP跳转HTTPS，或者页面内部路由跳转），每次页面跳转完成都会触发一次load事件；
• 哪怕你重复给iframe设置了相同的src值，部分浏览器也会重新触发load；
• 本地调试时，同源内容的缓存机制也可能导致load事件被触发两次。

解决方案 #

方案1：执行后立即移除事件监听

在函数内部先解绑监听，从根源上避免重复执行：

function AddIFrameIncludes() {
  // 先移除事件监听，防止后续重复触发
  const iframe = document.getElementById('helpBody');
  iframe.removeEventListener('load', AddIFrameIncludes);
  
  // 你的原有逻辑：获取iframe文档、添加div等操作
  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  // ... 这里写你添加div的代码
}

// 初始绑定一次事件
document.getElementById('helpBody').addEventListener('load', AddIFrameIncludes);

方案2：添加执行标记

用一个变量标记函数是否已经执行过，直接跳过后续触发：

let hasAddedIncludes = false;
function AddIFrameIncludes() {
  if (hasAddedIncludes) return;
  hasAddedIncludes = true;
  
  // 你的原有逻辑
}

问题二：appendChild后div在代码执行完毕后消失 #

核心原因 #

这几乎肯定是因为你添加div之后，iframe的文档被重新加载了——比如第二次触发load事件时，浏览器会重新生成iframe的document对象，之前添加的div属于旧文档，自然会被覆盖消失。这也正好能对应第一个问题的“函数执行两次”：第一次添加div，第二次重新加载文档把div清掉。

解决方案 #

1. 先解决第一个问题，确保AddIFrameIncludes只执行一次（用上面的两种方案都可以）；
2. 检查你的代码中，是否在添加div之后，还有其他逻辑修改了iframe的src属性，或者触发了文档刷新的操作；
3. 如果是跨域内容：虽然调试时能看到div被添加，但浏览器的同源策略可能会阻止DOM修改的持久化（这种情况控制台会有报错，你可以检查一下）。如果是同源内容，基本就是重复加载的问题。

额外调试小技巧 #

在AddIFrameIncludes开头加一行日志，配合浏览器的网络面板排查：

function AddIFrameIncludes() {
  console.log(`AddIFrameIncludes触发了！时间：${new Date().toLocaleTimeString()}`);
  // 后续逻辑
}

这样你能清楚看到触发的时间点，再去网络面板看iframe的资源请求，就能确认是不是重定向或者重复加载导致的两次触发了。

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