动态创建的可编辑iframe在Firefox中不起作用

Question

我有一个iframe，该iframe是在触发功能时使用createElement()在JavaScript中生成的，它成为文本编辑器。它在Chrome，Safari和Edge中可以正常工作，但是在Firefox中，innerHTML文本“文本层”将在iframe中短暂闪烁，然后消失，并且iframe似乎不可编辑。经检查，iframe的body标签为空。如果我在检查器中的iframe的body标签上将contentEditable设置为true，则它似乎可以正常工作，但是当我尝试在JS函数中进行设置时，Firefox中什么也没有发生。

我猜想这与用JavaScript创建的iframe有关，因为使用JS将DOM中已经存在的iframe的designMode设置为'On'似乎可以正常工作。想知道是否有办法使它在Firefox中工作，也许是创建iframe的另一种方法？我已经看到一些类似的问题，可以通过在iframe的src中放置一些javascript来解决，就像在注释here中一样，但这显然在其他浏览器中引起了问题。在JS中创建iframe优于从某个位置附加它。

function text() {
var rtf = document.createElement("iframe");
rtf.name = "richTextField";
rtf.id = "richTextField";
rtf.className = "texteditor";
var dwrap = document.createElement("div");
dwrap.appendChild(rtf);
var tframe = document.getElementById("richTextField");
tframe.contentWindow.document.designMode = 'On';
tframe.contentWindow.document.body.innerHTML = "Text Layer";
tframe.contentWindow.document.getElementsByTagName('body')[0].focus();
tframe.onload = autosize();
};

Answer 1

找到了这个15 year old bug report，并且可以通过在setTimeout函数内部设置contentWindow属性来使其工作。

function text() {
var rtf = document.createElement("iframe");
rtf.name = "richTextField";
rtf.id = "richTextField";
rtf.className = "texteditor";
var dwrap = document.createElement("div");
dwrap.appendChild(rtf);
var tframe = document.getElementById("richTextField");

setTimeout(function(){ 
tframe.contentWindow.document.designMode = 'On';
tframe.contentWindow.document.body.innerHTML = "Text Layer";
tframe.contentWindow.document.getElementsByTagName('body')[0].focus();
}, 0);

tframe.onload = autosize();
};