Firefox移除动态追加的iframe body内容问题求助

这个问题我之前踩过坑！Firefox对空src的iframe处理逻辑和Chrome、Edge确实不一样，导致你追加的内容被莫名清空了。

问题原因 #

当你给iframe设置空src时，Firefox会自动触发加载about:blank页面，这个加载过程会重置iframe内部的整个DOM结构——你提前追加的内容还没来得及渲染，就被新加载的空白页面覆盖了。而Chromium系浏览器（Chrome/Edge）在这种场景下会直接允许操作iframe的内容，不会触发后续的页面重置，所以代码能正常运行。

解决方案 #

这里给你两种靠谱的解决办法，按需选择：

方案1：使用srcdoc属性直接注入内容

这是最简洁的方式，直接通过srcdoc把要插入的内容传给iframe，避免Firefox加载about:blank：

var contents = $('#editor').html();
// 直接在iframe的srcdoc里构建编辑器结构
var $iframe = $('<iframe/>', { 
    'class' : 'editor-iframe', 
    'srcdoc' : `<div class="editor" contenteditable="true">${contents}</div>`,
    'border': 0, 
    'height' : '100%', 
    'width' : '100%' 
});
// 把iframe添加到容器里
$('#your-target-container').append($iframe);

方案2：监听iframe的load事件后再操作DOM

如果需要兼容不支持srcdoc的老浏览器，就等iframe加载完成（也就是about:blank加载完毕）后，再往里面追加内容：

var $iframe = $('<iframe/>', { 
    'class' : 'editor-iframe', 
    'src' : '', 
    'border': 0, 
    'height' : '100%', 
    'width' : '100%' 
});

// 监听load事件，确保iframe内部DOM准备好再操作
$iframe.on('load', function() {
    var $iframe_editor = $('<div/>', { 'class': "editor" , 'contenteditable' : true });
    var contents = $('#editor').html();
    $iframe_editor.append(contents);
    // 这里要通过contentDocument访问iframe内部的文档对象
    $(this.contentDocument.body).append($iframe_editor);
});

$('#your-target-container').append($iframe);

小提示 #

• 优先选方案1，代码更简洁，也符合现代浏览器的标准；
• 方案2要注意：如果iframe的src后续有变化，load事件会再次触发，可能需要做防抖处理。

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