Захват события завершения загрузки iframe


Ответы:


197

<iframe>у элементов есть loadсобытие для этого.


Как вы слушаете это событие, зависит от вас, но, как правило, лучший способ заключается в следующем:

1) создайте свой iframe программно

Он гарантирует, что ваш loadслушатель всегда вызывается, прикрепляя его до начала загрузки iframe.

<script>
var iframe = document.createElement('iframe');
iframe.onload = function() { alert('myframe is loaded'); }; // before setting 'src'
iframe.src = '...'; 
document.body.appendChild(iframe); // add it to wherever you need it in the document
</script>

2) встроенный javascript - это еще один способ, который вы можете использовать внутри вашей HTML-разметки.

<script>
function onMyFrameLoad() {
  alert('myframe is loaded');
};
</script>

<iframe id="myframe" src="..." onload="onMyFrameLoad(this)"></iframe>

3) Вы также можете прикрепить прослушиватель событий после элемента внутри <script>тега, но имейте в виду, что в этом случае есть небольшая вероятность того, что iframe уже загружен к тому времени, когда вы добавите свой слушатель. Поэтому возможно, что он не будет вызываться (например, если iframe очень-очень быстрый или поступает из кеша).

<iframe id="myframe" src="..."></iframe>

<script>
document.getElementById('myframe').onload = function() {
  alert('myframe is loaded');
};
</script>

Также посмотрите мой другой ответ о том, какие элементы могут также инициировать этот тип loadсобытия


2
Спасибо, это именно то, что мне нужно!
Хайме Гарсия,

1
С помощью этого метода вы можете запустить только одну функцию, когда загружен iframe. Смотрите мой ответ ниже, используя addEventListenerкоторый позволяет запускать несколько обратных вызовов при событии загрузки.
IEST

1
Этот подход также уязвим для состояния гонки, поскольку iframe может загружаться до выполнения тега script.
Iest 05

7
Событие загрузки не работает при попытке загрузить файл.
Джерри

1
Да, это не работает в IE, если содержимое iFrame не является HTML, например PDF. Смотрите это: connect.microsoft.com/IE/feedback/details/809377/…
Сергей Гуссак

27

Ни один из приведенных выше ответов не помог мне, но это сработало.

ОБНОВЛЕНИЕ :

Как отметил @doppleganger ниже, загрузка отсутствует с jQuery 3.0, поэтому здесь используется обновленная версия on. Обратите внимание, что на самом деле это работает на jQuery 1.7+, поэтому вы можете реализовать его таким образом, даже если вы еще не используете jQuery 3.0.

$('iframe').on('load', function() {
    // do stuff 
});

1
Начиная с jQuery 3.0, loadбольше нет. Пожалуйста, используйте .on('load', function() { ... })вместо этого.
Doppelganger

Если вы используете jqueryили, jqLiteто это путь!
Питер

11

Для этого есть другой последовательный способ ( только для IE9 + ) в JavaScript:

const iframe = document.getElementById('iframe');
const handleLoad = () => console.log('loaded');

iframe.addEventListener('load', handleLoad, true)

И если вас интересуют Observables, это поможет:

return Observable.fromEventPattern(
  handler => iframe.addEventListener('load', handler, true),
  handler => iframe.removeEventListener('load', handler)
);

Беспокоит ли меня то, что мой отладчик останавливается в моей точке останова handleLoad()до того, как я увижу визуализацию iFrame? Я надеюсь, что это чисто проблема с рендерингом, а не с загрузкой контента.
Шридхар Сарнобат,

как насчет того, чтобы захватить это событие с помощью jquery, когда iframe уже существует ... то есть: iframe не создается jquery.
Gumuruh

3

Обратите внимание, что событие onload, похоже, не срабатывает, если iframe загружается вне экрана. Это часто происходит при использовании вкладок «Открыть в новом окне» / w.


2
также с iframe без отображения;)
Felipe N Moura

1

Вы также можете записать событие готовности jquery следующим образом:

$('#iframeid').ready(function () {
//Everything you need.
});

Вот рабочий пример:

http://jsfiddle.net/ZrFzF/


16
Я не думаю, что код делает то, что вы думаете, что он делает. Вы можете заменить этот селектор "#iFrame" в скрипке чем угодно, и предупреждение все равно
сработает

6
В дополнение к @roryok, готовность срабатывает, когда готов DOM, загружается не вся страница.
Иван Никитин

1
ready запускается, когда DOM готов и js может выполняться, а не при загрузке контента.
Сергей Гуссак

2
$ ("# iframeid"). ready запускает функцию, когда элемент находится в dom. Не после завершения загрузки ifram.
Popsyjunior

он только что позвонил :(
Хоссейн Бадрнежад
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.