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

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

77
dhtml html iframe javascript load

4 ответов

<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> tag, но имейте в виду, что в этом случае есть небольшая вероятность того, что iframe уже загружен к тому времени, когда вы получите добавление вашего слушателя. Поэтому вполне возможно, что это будет не вызывается (например, если iframe очень быстрый или поступает из кэша).

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

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

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

123

ни один из ответов не работал для меня, однако это сделал

обновление:

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

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

вы также можете захватить событие jQuery ready таким образом:

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

вот пример:

http://jsfiddle.net/ZrFzF/

6

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

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

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

и если вы заинтересованы в параметры это делает трюк:

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