Обнаружение загрузки содержимого iframe (кроссбраузерность)

Я пытаюсь определить, когда 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 загружен и его документ готов?

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

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

Если по какой-то причине совместная работа документа 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)" ... />

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

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

Обычно вы добавляете это в свой document.ready()

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

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

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

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

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