Tangkap iframe memuat aktivitas lengkap

Jawaban:

197

<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

gblazex
sumber
2
Terima kasih, ini tepat seperti yang saya butuhkan!
Jaime Garcia
1
Dengan metode ini Anda hanya dapat menjalankan fungsi tunggal saat iframe dimuat. Lihat jawaban saya di bawah ini menggunakan addEventListeneryang memungkinkan beberapa panggilan balik berjalan pada acara memuat.
Iest
1
Pendekatan ini juga rentan terhadap kondisi balapan karena iframe dapat dimuat sebelum tag skrip dieksekusi.
Iest
7
Acara memuat tidak berfungsi ketika Anda mencoba mengunduh file.
Jerry
1
Ya, itu tidak berfungsi di IE jika konten iFrame bukan HTML, misalnya PDF. Lihat ini: connect.microsoft.com/IE/feedback/details/809377/…
Sergey Gussak
27

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 
});
roryok
sumber
1
Pada jQuery 3.0, loadhilang. Silakan gunakan .on('load', function() { ... })sebagai gantinya.
Doppelganger
Jika Anda menggunakan jqueryatau jqLiteini adalah cara untuk pergi!
Peter
11

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)
);
aitorllj93
sumber
Apakah saya khawatir debugger saya berhenti di breakpoint saya handleLoad()sebelum saya melihat render iFrame? Saya harap itu murni masalah rendering daripada masalah pemuatan konten.
Sridhar Sarnobat
bagaimana untuk menangkap acara itu dengan jquery ketika iframe sudah ada ... yaitu: iframe tidak dibuat oleh jquery.
gumuruh
3

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

Kenneth M. Kolano
sumber
2
juga dengan iframe tanpa tampilan;)
Felipe N Moura
1

Anda juga dapat menangkap acara siap jquery dengan cara ini: 

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

Berikut ini contoh kerjanya:

http://jsfiddle.net/ZrFzF/

Gonza Oviedo
sumber
16
Saya tidak berpikir bahwa kode melakukan apa yang Anda pikirkan. Anda dapat mengganti pemilih "#iFrame" di biola Anda dengan apa pun dan peringatan itu masih menyala
roryok
6
Selain @roryok, api siap saat DOM siap, bukan seluruh halaman dimuat.
Ivan Nikitin
1
ready dipecat ketika DOM siap dan js dapat dieksekusi, bukan saat konten dimuat.
Sergey Gussak
2
$ ("# iframeid"). ready memicu fungsi ketika elemen berada di dom. Tidak ketika ifram selesai memuat.
Popsyjunior
hanya disebut sekali :(
Hossein Badrnezhad