Обнаружение при загрузке содержимого 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 script, который генерирует его спящий режим.

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

ОТВЕТЫ

Ответ 1

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

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

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

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

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

Выходы из нагрузок:

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

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

  • способ старой школы включить его в разметку:

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

Inline 'onsomething обработчики в HTML почти всегда ошибаются и их следует избегать, но в этом случае иногда это наименее плохая опция.

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

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

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