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

Question

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

Answer 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 события

Answer 2

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

ОБНОВЛЕНИЕ :

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

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

Answer 3

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

Answer 4

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

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

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

http://jsfiddle.net/ZrFzF/

Answer 5

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