iframe内代码将父页面元素移入iframe在Firefox中失效如何解决

根因说明 #

Firefox对跨文档DOM操作的规范实现更严格，父页面和iframe属于不同的document上下文，直接将父文档的DOM节点插入到iframe所属的document中时，Firefox不会做隐式转换，因此操作失效，Chrome对该场景做了额外兼容，所以原代码可以正常运行。

修复代码 #

你可以通过adoptNode方法先将父页面的节点迁移到当前iframe的文档上下文，再执行插入操作，移动行为和你的原需求完全一致，无需额外删除原父页面的节点：

// 1. 从父文档获取目标原生DOM节点
const targetParentEl = window.parent.document.querySelector('#parent_element_thats_being_moved');
// 2. 将节点从父文档迁移到当前iframe的文档上下文
const migratedEl = document.adoptNode(targetParentEl);
// 3. 插入到iframe内的目标位置
$(migratedEl).appendTo('#element_its_being_appended_to_inside_iframe');

如果需要保留原父页面的节点，仅复制一份插入到iframe中，可以改用importNode方法：

const targetParentEl = window.parent.document.querySelector('#parent_element_thats_being_moved');
// 第二个参数true表示深度复制所有子节点
const copiedEl = document.importNode(targetParentEl, true);
$(copiedEl).appendTo('#element_its_being_appended_to_inside_iframe');

如果目标节点绑定了jQuery事件，使用detach方法可以保留事件绑定，调整写法如下：

const $targetEl = $('#parent_element_thats_being_moved', window.parent.document).detach();
const migratedEl = document.adoptNode($targetEl.get(0));
$(migratedEl).appendTo('#element_its_being_appended_to_inside_iframe');

注意事项 #

• 操作的前提是父页面和iframe满足同源策略，否则没有权限访问父页面的DOM内容

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