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

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

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

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

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

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

4 76
javascript events cross-browser

4 ответа:

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

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

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

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

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

пути выхода из нагрузки-рас:

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

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

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

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

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

61

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

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

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

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

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

3

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

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