Bir iframe'in içeriği üst sayfadan tamamen yüklendiğinde yakalamanın bir yolu var mı?
Bir iframe'in içeriği üst sayfadan tamamen yüklendiğinde yakalamanın bir yolu var mı?
Yanıtlar:
<iframe>
öğeleri bunun için bir load
olay 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 load
dinleyici 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
addEventListener
birden geri aramaları yük olayı çalışmasını sağlar.
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
});
load
, gitti. Lütfen .on('load', function() { ... })
bunun yerine kullanın.
jquery
veya jqLite
sonra bu gitmek için yol!
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.
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.
Ayrıca jquery hazır etkinliğini şu şekilde yakalayabilirsiniz:
$('#iframeid').ready(function () {
//Everything you need.
});
İşte çalışan bir örnek: