Обнаружение загрузки контента Iframe (кросс-браузер)

Question

Я пытаюсь определить, загрузился ли iframe и его содержимое, но мне не повезло. Мое приложение принимает некоторые входные данные в текстовых полях в родительском окне и обновляет iframe, чтобы обеспечить «предварительный просмотр»

Я начал со следующего кода (YUI), чтобы определить, когда происходит событие загрузки iframe.

$E.on('preview-pane', 'load', function(){
    previewBody = $('preview-pane').contentWindow.document.getElementsByTagName('body')[0];
}

'Preview-pane' - это идентификатор моего iframe, и я использую YUI для присоединения обработчика событий. Однако попытка получить доступ к телу в моем обратном вызове (при загрузке iframe) не удалась, я думаю, потому что iframe загружается до того, как обработчик событий готов. Этот код работает, если я задерживаю загрузку iframe, заставляя php-скрипт, который генерирует его, спать.

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

Answer 1

определить, когда загружен iframe и готов ли его документ?

Идеально, если вы можете заставить iframe сообщать вам себя из сценария внутри фрейма. Например, он может напрямую вызвать родительскую функцию, чтобы сообщить, что он готов. При выполнении кросс-фреймового кода всегда требуется осторожность, поскольку все может происходить в том порядке, который вы не ожидаете. Другой альтернативой является установка «var isready = true;» в своей области видимости и использование родительского скрипта для «contentWindow.isready» (и добавление обработчика загрузки, если нет).

Если по какой-то причине совместное использование документа iframe нецелесообразно, у вас возникает традиционная проблема гонки нагрузки, а именно: даже если элементы расположены рядом друг с другом:

<img id="x" ... />
<script type="text/javascript">
    document.getElementById('x').onload= function() {
        ...
    };
</script>

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

Пути выхода из гонки:

1. в IE вы можете использовать свойство «readyState», чтобы увидеть, загружено ли что-то уже;

2. если приемлемо наличие элемента, доступного только с включенным JavaScript, вы можете создать его динамически, установив функцию события «onload» перед настройкой источника и добавлением на страницу. В этом случае он не может быть загружен до установки обратного вызова;

3. старый способ включения его в разметку:

   <img onload="callback(this)" ... />

Встроенные обработчики «что-то» в HTML почти всегда неправильные вещи, и их следует избегать, но в этом случае иногда это наименее плохой вариант.

Answer 2

См. это сообщение в блоге. Он использует jQuery, но он должен помочь вам, даже если вы его не используете.

В основном вы добавляете это к вашему document.ready()

$('iframe').load(function() {
    RunAfterIFrameLoaded();
});

Answer 3

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

<iframe src={'path-to-iframe-source'} onLoad={this.loadListener} frameBorder={0} />

Answer 4

Для тех, кто использует Ember, это должно работать как положено:

<iframe onLoad={{action 'actionName'}}  frameborder='0' src={{iframeSrc}} />