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

Question

我有一个在 JavaScript 中生成的 iframe，createElement()当一个函数被触发时，它变成了一个文本编辑器。它在 Chrome、Safari 和 Edge 中运行良好，但在 Firefox 中，innerHTML文本“文本层”将在 iframe 中短暂闪烁，然后消失，并且 iframe 似乎不可编辑。经检查，iframe 的 body 标签为空。如果我contentEditable在检查器中将 iframe 的 body 标记设置为 true，它似乎可以正常工作，但是当我尝试在我的 JS 函数中设置它时，Firefox 中没有任何反应。

我猜这与在 JavaScript 中创建的 iframe 有关，因为将designModeDOM 中已经存在的 iframe设置为'On'with JS 似乎可以正常工作。想知道是否有办法让它在 Firefox 中工作，也许是另一种创建 iframe 的方法？我看到了一些类似的问题，这些问题是通过在 iframe 中放置一些 javascript 来解决的src，就像这里的评论一样，但这显然会导致其他浏览器出现问题。在 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 年前的错误报告，并且能够通过在 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();
};