İframe yüklemesi tamamlama etkinliğini yakalayın


Yanıtlar:


197

<iframe>öğeleri bunun için bir loadolay var.


Bu etkinliği nasıl dinlediğiniz size kalmış, ancak genellikle en iyi yol:

1) iframe'inizi programlı olarak oluşturun

Tabii senin yapar loaddinleyici hep ekleyerek denir önce iframe başlar yükleme.

<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) satır içi javascript , HTML işaretlemenizin içinde kullanabileceğiniz başka bir yoldur.

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

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

3) Ayrıca olay dinleyicisini öğeden sonra, bir <script>etiketin içine de ekleyebilirsiniz , ancak bu durumda, iframe'inizi dinleyicinizi eklediğiniz zamana kadar zaten yüklemesi olasılığının düşük olduğunu unutmayın. Bu nedenle o olasıdır değil çağrılabilir (örn iframe çok çok hızlıdır, ya cache gelen varsa).

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

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

Ayrıca, hangi öğelerin bu tür bir etkinliği tetikleyebileceğiyle ilgili diğer cevabımı da görünload


2
Teşekkürler, bu tam olarak ihtiyacım olanı yapıyor!
Jaime Garcia

1
Bu yöntemle, iframe yüklendiğinde yalnızca tek bir işlevi çalıştırabilirsiniz. Bkz aşağıda Cevabımı kullanarak addEventListenerbirden geri aramaları yük olayı çalışmasını sağlar.
Iest

1
İframe kod etiketi yürütülmeden önce yüklenebileceğinden , bu yaklaşım bir yarış durumuna da açıktır .
Iest

7
Bir dosyayı indirmeye çalıştığınızda load olayı çalışmaz.
Jerry

1
Evet, iFrame içeriği HTML değilse PDF'de çalışmaz.
Şuna

27

Yukarıdaki cevapların hiçbiri benim için işe yaramadı, ancak bu

GÜNCELLEME :

@Doppleganger aşağıda belirtildiği gibi, yük jQuery 3.0'dan itibaren kayboldu, bu yüzden kullanan güncellenmiş bir sürüm on. Bunun jQuery 1.7+ üzerinde çalışacağını lütfen unutmayın, böylece henüz jQuery 3.0'da olmasanız bile bu şekilde uygulayabilirsiniz.

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

1
JQuery 3.0 itibarıyla load, gitti. Lütfen .on('load', function() { ... })bunun yerine kullanın.
Doppelganger

Kullanıyorsanız jqueryveya jqLitesonra bu gitmek için yol!
Peter

11

Bunun için vanilya JavaScript'te başka bir tutarlı yol var ( sadece IE9 + için ):

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

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

Ve Gözlenebilirlerle ilgileniyorsanız, bu hile yapar:

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

handleLoad()İFrame oluşturmayı görmeden önce hata ayıklayıcının kesme noktasında durması bir endişe mi var? Umarım bu bir içerik yükleme sorunundan ziyade yalnızca bir oluşturma sorunudur.
Sridhar Sarnobat

iframe zaten oradayken bu olayı jquery ile yakalamaya ne dersiniz ... ie: iframe jquery tarafından oluşturulmamış.
Gumuruh

3

Iframe yüklendiğinde onload olayının tetiklenmediğini unutmayın. Bu sık sık "Yeni Pencerede Aç" / w sekmeleri kullanılırken ortaya çıkar.


2
ayrıca ekran yok iframe ile;)
Felipe N Moura

1

Ayrıca jquery hazır etkinliğini şu şekilde yakalayabilirsiniz:

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

İşte çalışan bir örnek:

http://jsfiddle.net/ZrFzF/


16
Kodun ne düşündüğünü yaptığını sanmıyorum. Kemandaki "#iFrame" seçiciyi herhangi bir şeyle değiştirebilir ve uyarı yine de patlar
roryok

6
@ Roryok'a ek olarak, DOM hazır olduğunda tüm sayfa yüklenmeyecek şekilde hazır tetiklenir.
Ivan Nikitin

1
DOM hazır olduğunda ready tetiklenir ve içerik yüklendiğinde değil js yürütülebilir.
Sergey Gussak

2
$ ("# iframeid"). ready, öğe domdayken işlevi tetikler. İfram yüklemeyi bitirdiğinde olmaz.
Popsyjunior

sadece bir kez çağırdı :(
Hossein Badrnezhad
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.