Tangkap iframe memuat aktivitas lengkap

Apakah ada cara untuk menangkap ketika konten iframe telah dimuat penuh dari halaman induk?

<iframe>elemen punya loadacara untuk itu.

Bagaimana Anda mendengarkan acara itu terserah Anda, tetapi umumnya cara terbaik adalah:

1) buat iframe Anda secara terprogram

Itu memastikan loadpendengar Anda selalu dipanggil dengan melampirkannya sebelum iframe mulai memuat.

<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 sebaris , adalah cara lain yang dapat Anda gunakan di dalam markup HTML Anda.

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

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

3) Anda juga dapat melampirkan pendengar acara setelah elemen , di dalam <script>tag, tetapi perlu diingat bahwa dalam kasus ini, ada sedikit peluang bahwa iframe sudah dimuat pada saat Anda menambahkan pendengar Anda. Karena itu ada kemungkinan bahwa itu tidak akan dipanggil (misalnya jika iframe sangat cepat, atau berasal dari cache).

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

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

Lihat juga jawaban saya yang lain tentang elemen mana yang juga dapat memecat jenis loadperistiwa ini

Tidak satu pun dari jawaban di atas bekerja untuk saya, namun ini berhasil

PEMBARUAN :

Seperti @doppleganger tunjukkan di bawah, beban hilang pada jQuery 3.0, jadi inilah versi terbaru yang digunakan on. Harap dicatat ini sebenarnya akan berfungsi pada jQuery 1.7+, sehingga Anda dapat menerapkannya dengan cara ini bahkan jika Anda belum menggunakan jQuery 3.0.

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

Ada cara lain yang konsisten ( hanya untuk IE9 + ) dalam JavaScript vanilla untuk ini:

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

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

Dan jika Anda tertarik pada Observables, ini akan membantu:

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

Perhatikan bahwa acara onload sepertinya tidak akan aktif jika iframe dimuat saat offscreen. Ini sering terjadi ketika menggunakan tab "Buka di Jendela Baru" / w.

Anda juga dapat menangkap acara siap jquery dengan cara ini:

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

Berikut ini contoh kerjanya:

http://jsfiddle.net/ZrFzF/