Захопіть повну подію завантаження iframe

Чи існує спосіб фіксації, коли вміст iframe повністю завантажений з батьківської сторінки?

<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 id="myframe" src="..."></iframe>

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

Також дивіться мою іншу відповідь про те, які елементи також можуть викликати подібний тип loadподії

Жоден із вищезазначених відповідей не працював для мене, однак це зробило

ОНОВЛЕННЯ :

Як @doppleganger вказував нижче, завантаження втрачається, як і у jQuery 3.0, ось ось оновлена ​​версія, яка використовує on. Зверніть увагу, що насправді це буде працювати на jQuery 1.7+, тому ви можете реалізувати це таким чином, навіть якщо ви ще не користуєтеся jQuery 3.0.

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

Існує ще один послідовний спосіб ( лише для 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)
);

Зауважте, що подія завантаження, здається, не спрацьовує, якщо кадр iframe завантажується під час екрану. Це часто виникає при використанні вкладки "Відкрити в новому вікні" / w.

Ви також можете зафіксувати подію, готову до jquery таким чином:

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

Ось робочий приклад:

http://jsfiddle.net/ZrFzF/