如何移动<iframe>元素而不触发其重新加载？

核心问题出在Element.before()/Element.after()的浏览器实现逻辑上：当你把已存在于DOM中的元素作为这两个方法的参数时，浏览器会先将该元素从原DOM树中移除，再重新插入到目标位置——这个过程会让内部的iframe被判定为“重新挂载”，从而触发src资源的重载。

解决方案：改用父节点的insertBefore()方法移动节点 #

直接通过元素的父节点来控制位置，节点会被直接转移而非重新插入，完全保留iframe的已加载状态。

替换Element.before(targetDd)：

原来的代码：

// 把包含iframe的dd移到referenceEl前面
referenceEl.before(targetDd);

替换为：

// 直接通过父节点插入，避免iframe重载
referenceEl.parentNode.insertBefore(targetDd, referenceEl);

替换Element.after(targetDd)：

原来的代码：

// 把包含iframe的dd移到referenceEl后面
referenceEl.after(targetDd);

替换为：

// 插入到referenceEl的下一个兄弟节点之前，若referenceEl是最后一个元素则自动追加到末尾
referenceEl.parentNode.insertBefore(targetDd, referenceEl.nextSibling);

原理说明 #

insertBefore()是DOM的原生节点移动API，它仅改变节点在父元素中的位置索引，节点本身始终处于DOM的上下文关联中，不会触发任何元素的卸载/重新挂载流程，因此iframe的状态会被完整保留。

而before()/after()属于较新的语法糖，虽然使用便捷，但部分浏览器的实现对已存在的DOM元素处理逻辑是“先移除再插入”，这就触发了iframe的重载机制——这也是为什么你观察到只有当该dd作为目标参数时才会出现问题，而被其他元素带动时（比如父容器整体排序）不会触发的原因。

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