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

Question

Я пытаюсь создать функцию печати для веб-сайта, который динамически загружает веб-страницы во всплывающем окне. Вся ситуация немного странная, поэтому я объясню, что я делаю в точности, и если у кого-то есть предложения о том, как я мог бы сделать этот процесс более эффективным образом, я все уши.

Поскольку у меня есть несколько веб-страниц, которые нужно печатать вместе, и я не могу контролировать, какой контент мне будет подан, я решил, что было бы лучше всего загрузить все внутри iframe (главным образом потому, что многие документы содержат скрипты и стили, которые загрязняли бы остальных, если бы они были просто выброшены на страницу вместе ...)

Поскольку iframe не являются гибкими, я нашел единственный способ выяснить, какой размер должен быть в моем iframe, я должен отображать каждый веб-документ и записывать высоту, а затем визуализировать каждый документ в iframe с высотой, которую я первоначально записал.

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

var body = popWindow.document.createElement("body"); 
var iframe = popWindow.document.createElement("iframe"); 

iframe.contentDocument.open(); 
iframe.contentDocument.write(data); 
iframe.contentDocument.close(); 

Проблема происходит, когда я ударил

iframe.contentDocument.open(); 

IFrame конкретизируется, но contentDocument, как представляется, быть пустым. Я попытался дождаться загрузки этого содержимого, но он просто сидит и петли бесконечно.

Answer 1

Вы можете использовать jQuery, чтобы ждать загрузки фрейма, и они делают ваши вещи.

$("#your-frame").load(function() { 
    //frames["your-frame"] 
}); 

EDIT: Использование только Javascript

var yourFrame = document.getElementById('your-frame'); 
yourFrame.addEventListener("load", function() { 
}); 

Answer 2

вы можете просто прикрепить прослушиватель событий к окну Iframe в:

iframe.window.addEventListener('load', function(){ ...