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

Question

我有一个在 JavaScript 中使用createElement() 在触发函数时生成的 iframe，它变成了一个文本编辑器。它在 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 来解决，就像在 cmets 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();
};