Копирование всего документа в iframe с использованием JavaScript

Question

Звучит странно, но это то, что я пытаюсь сделать с помощью javascript (все это запускается обработчиком событий):

1. Сохраните содержимое страницы (желательно весь документ или хотя бы объект documentElement) в переменную.
2. Создайте iframe и вставьте его в тело.
3. Замените документ iframe сохраненным документом (чтобы в iframe теперь было то же содержимое, что и на внешней странице).
4. Изменить внешнюю страницу.

Все прекрасно, кроме части о замене документа iframe. Я пробовал кучу разных вещей, но у всех есть проблемы (они обрисованы в общих чертах ниже). Мне нужны обработчики событий, стили, ссылки и т. Д., Чтобы все работало правильно, когда страница находится в iframe.

И да, я понимаю, что мог бы просто установить src iframe для URL текущей страницы, но я бы предпочел, чтобы страница не загружалась. Если я не смогу найти решение, это то, что я сделаю.

---

Вещи, которые я уже пробовал:

var html = iframe.contentWindow.document.importNode(document.documentElement, true);
iframe.contentWindow.documentElement = html;

Я получаю сообщение об ошибке («установка свойства, которое имеет только геттер»).

var html = iframe.contentWindow.document.importNode(document.documentElement, true);
var idoc = iframe.contentWindow.document;
while(idoc.firstChild) idoc.removeChild(idoc.firstChild);  // remove all children (firefox automatically creates an html element for iframes with no src)
idoc.appendChild(html); // insert a new documentElement

Кажется, это работает, но не выполняет рендеринг стилей, а обработчики событий не работают. Интересно, что ссылки также не работают, и они даже не стилизуются под стили браузера по умолчанию. Может быть, это потому, что DOCTYPE не скопирован в iframe?

iframe.contentWindow.document.documentElement.innerHTML = document.documentElement.innerHTML;

Это поведение аналогично методу removeChild / appendChild.

---

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

Answer 1

Что касается последнего метода, возможно, DOM окна, из которого вы копируете ОТ, еще не загружен?

Что касается Doctype, вы можете перестроить его с нуля и вставить перед html-узлом, используя document.write.

Doctype доступен через document.doctype, но в нем есть только геттер.

Answer 2

Как насчет того, чтобы загрузить пустой HTML-шаблон документа в iframe? Создайте документ в какой-нибудь папке «myFolder / sparePage.html», а затем выполните

var myIframe = document.createElement("iframe");
myIframe.style.display = "none";
document.body.appendChild(myIframe);
function myIframeLdd(){
   console.log("myIframe is loaded");
    //....your iframe ready code here
   myIframe.removeEventListender("load",myIframeLdd,false);
}
myIframe.addEventListener("load", myIframeLdd, false);
myIframe.src = "myFolder/sparePage.html"