Захват события полной загрузки iframe

Ответ 1

<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

Ни один из вышеперечисленных ответов не работал у меня, однако это делало

UPDATE

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

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

Ответ 3

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

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

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

http://jsfiddle.net/ZrFzF/

Ответ 4

Существует еще один согласованный способ (только для 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)
);