Возможно: вставить свой собственный HTML (весь сайт) в iframe

Question

У меня есть все веб-сайты HTML, которые хранятся в виде строки javascript, и я хочу поместить их в iframe. Как я могу поместить эту строку HTML в iframe и заставить ее показывать веб-сайт? Я пробовал this.src = HTML_STR; this.innerHTML = HTML_STR; но они не показывают HTML_STR.

Я понимаю, что это может быть глупо, потому что вместо того, чтобы размещать HTML-сайты в строке, я мог бы просто установить iframes src на веб-сайт и показывать веб-сайт таким образом.

НО причина, по которой я это делаю, заключается в том, что он обновляет веб-сайт. Поэтому я хочу получить HTML-код веб-сайта (который я обновляю), преобразовать все элементы с классом «обновляемые» в текстовые области (чтобы их можно было обновлять), а затем показать этот HTML-код в iframe.

Другая причина использования iframe, а не просто изменения HTML-кода в div, заключается в том, что каждый веб-сайт импортирует таблицу стилей .css, и я не хочу, чтобы их файл css влиял на мои сайты обновлений css или на мой обновитель .css влияет на внешний вид сайтов HTML, поэтому, если я показываю сайт в фрейме, каждый сайт css не влияет друг на друга.

Например, если для updater.css указано следующее, это повлияет на все элементы p в других веб-сайтах html:

p { background-color: red; width: 50%; }

Так есть ли способ вставить мой собственный HTML в iframe. Или есть другой способ добиться того, что я пытаюсь сделать.

Answer 1

Предполагая, что вы хотите написать в iframe от родителя, вы можете сделать это:

var ifrm = document.getElementById('myFrame');
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write('Hello World!');
ifrm.document.close();

Вот рабочий jsFiddle . Исходный код взят из здесь и здесь .

Answer 2

Вы можете попробовать сделать document.write(yourHTMLString); внутри iframe.

Другой способ может состоять в том, чтобы просто использовать JavaScript для замены обновляемых элементов текстовыми областями внутри исходного HTML при нажатии определенной кнопки.