İ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.