Динамически создаваемый редактируемый iframe не работает в Firefox - PullRequest
Новая
       16

Динамически создаваемый редактируемый iframe не работает в Firefox

0 голосов
/ 09 октября 2018

У меня есть iframe, который генерируется в JavaScript с createElement() при запуске функции, которая становится текстовым редактором.Он отлично работает в Chrome, Safari и Edge, но в Firefox текст innerHTML, «Текстовый слой», будет кратковременно мигать в пределах iframe, а затем исчезнет, ​​и iframe не будет редактируемым.После проверки тег тела iframe пуст.Если я установлю contentEditable в значение true в теге тела iframe в инспекторе, то, похоже, он будет работать правильно, но когда я пытаюсь установить это в своей функции JS, в Firefox ничего не происходит.

Я предполагаю, что это как-то связано с созданным в JavaScript iframe, поскольку установка designMode для iframe, уже находящегося в DOM, на 'On' с JS, кажется, работает правильно.Хотите знать, если есть способ заставить это работать в Firefox, может быть, другой способ создания iframe?Я видел некоторые похожие проблемы, которые были решены путем помещения некоторого javascript в iframe src, как в комментариях здесь , но это, очевидно, вызывает проблемы в других браузерах.Создание iframe в JS предпочтительнее, чем его добавление откуда-либо. 

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();
};

1 Ответ

0 голосов
/ 10 октября 2018

Нашел этот 15-летний отчет об ошибке и смог заставить его работать, установив свойства contentWindow внутри функции setTimeout. 

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();
};
...