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