onload öğesinin ifrome davranışı vs addEventListener ('load')

Bir sayfaya gizli iframe öğeleri ekleyerek etrafta dolaşıyorum ve yüklendikten sonra bunların DOM'unu değiştirmek istiyorum. Henüz yüklenmediğinden iframe bir sayfaya ekledikten hemen sonra DOM'ı manipüle etmeye başlayamayacağımı fark ettim. Bu, DOMContentLoaded olayıyla tamamlanamaz, çünkü bu, sayfaya eklenene kadar iframe'de bulunmayan belgeye karşı tetiklenir, dolayısıyla load olayını kullanmamız gerekir. İşte onload öğesinin ifrome davranışı vs addEventListener ('load')

bazı test kodu:

var iframe = document.createElement('iframe'); 
iframe.onload = function() { console.log('loaded!'); }; 
document.getElementsByTagName('body')[0].appendChild(iframe);

beklendiği gibi ben addEventListener olarak değiştirin Ancak bu durum bile DOM eklenen almaz işler:

var iframe = document.createElement('iframe'); 
iframe.addEventListener('load', function() { console.log('loaded!'); }); 
document.getElementsByTagName('body')[0].appendChild(iframe);

ben işimi t IE'de attachEvent test edilmiştir.

Bunun üzerinde herhangi bir ışık var mı?

kaynak

2011-03-07 roryf

addEventListener() işlev 3 bağımsız değişken gerektirir! 3 argüman isteğe bağlı olarak işaretlenmiş https://developer.mozilla.org/en/DOM/element.addEventListener

bir göz atın, ama sonra yazdıkları:

Not Bu parametre tüm tarayıcı sürümlerinde isteğe bağlı değil olduğunu.

nerede ve ne zaman gerekli olduğundan emin değilim, ama addEventListener 2 ile argümanlar çağrılırken FF4 benim testler bir istisna attı:

yakalanmamış istisna: [İstisna ..."Değil yeterli argümanlar" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" konum: "JS çerçeve :: http://localhost/index.php :: :: hat 10" veriler: no] Bu arada

, kodunuz Chrome'da iyi çalışır [loaded! dizesi konsolda kaydedilir].

FF gibi IE9 da standart modda (<!DOCTYPE html> ile) 3. argümana ihtiyaç duyar. IE9, W3C'nin olay modelini destekleyen ilk IE'dir. Yani önceki sürümlerde attachEvent'u denemeliyiz. Daha önce IE'lere sahip değilim, ancak IE7/8 Standart Modunda ve hatta IE9'daki Quirks Mode'da çalıştı. İşte kullandığım kod:

<!DOCTYPE html> 
<html> 
<head><title></title></head> 
<body> 
<script> 
    window.onload=function(){ 
     var iframe = document.createElement('iframe'); 
     var func = function() { console.log('loaded!');}; 
     if(iframe.addEventListener) 
      iframe.addEventListener('load', func, true); 
     else if(iframe.attachEvent) 
      iframe.attachEvent('onload',func); 
     document.body.appendChild(iframe); 
    } 
</script> 
</body> 
</html>

kaynak

2011-05-23 17:14:53

Ben 3. parametre ile ilgili sorunun tam olarak sorun olduğuna inanıyorum, yaptığınız hatayı almıyordum ama muhtemelen bir şekilde bastırılıyordu. Hatırlayamadım ama açıkça Chrome'da test etmedim (aptalca ben ...) Güzel biri, teşekkürler. – roryf

İlk örnek çalışıyor mu? Değil aradığınız ama olaylar çalışırken bu aydınlatmak gerektiğini tam olarak emin: jQuery document.ready kaynağı

$(document).ready equivalent without jQuery

addEventListener IE çalışmıyor, test ettiğiniz orası eğer öyleyse, o zaman Iframe eklenir önce 2. başarısız olur.

Ayrıca, sayfanın kendisinden bir geri arama da ekleyebilirsiniz (örneğin, jQuery'yi kullanarak tekerleği yeniden icat etmemek için) $(iframe).ready() {..} size tutarlı davranışlar vereceğinden şüpheleniyorum.

kaynak

2011-03-07 15:29:29

'ready' olayını kullanamıyorum çünkü bu, bir şeyleri kaçırmadığım sürece henüz var olmayan bir belgeyi gerektiriyor. – roryf

iframe öğesinde jquery document.ready ile aynı mantığı kullanmayı öneriyorum örn. Bu eklentinin yaptığı gibi: http://www.thunderguy.com/semicolon/2007/08/14/elementready-jquery-plugin/ ancak ilk kod snippet'inizde yanlış bir şey varsa, hala net değil görüntüler yüklenmeden önce? Alternatif olarak, iframe'deki kodu kontrol ettiğinizi varsayarak, ebeveyn kullanarak bir işleve geri dönmek için document.ready dosyasını kullanabilirsiniz. –

İlk kod parçacığı doğru şekilde çalışıyor (belirtildiği gibi), ancak "yük" özelliği standart dışı (AFAIK) ve neden standartlara uymanın (IE'yi göz ardı etmiyor) çalışmadığını merak ettim. Iframe'in kendisi başka bir sayfaya işaret etmiyor, boş bir yere yüklemek ve DOM'ı doldurmak istiyorum. – roryf

benim için çalışıyor Bu:

html: (documentReady üzerine)

iframe source code: <br /> 
<textarea id="output" rows="20" cols="60">loading ...</textarea>

javascript:

var iframe = document.createElement('iframe'); 
iframe.id = iframe.name = "testframe"; 
iframe.src = "http://fiddle.jshell.net"; 
iframe.width = 400; 
iframe.height = 100; 
iframe.style.display = "none"; 

if (iframe.addEventListener) 
    iframe.addEventListener("load", loaded, false); 
else 
    iframe.attachEvent("onload", loaded); 

function loaded() { 
    var html; 
    if (iframe.contentDocument) 
     html = iframe.contentDocument.getElementsByTagName("HTML")[0].innerHTML; 
    else 
     html = window.frames[iframe.name].document.getElementsByTagName("html")[0].innerHTML; 

    document.getElementById("output").value = html; 
} 

document.getElementsByTagName("body")[0].appendChild(iframe);

at Demo bakınız: addEventListener ile http://jsfiddle.net/WcKEz/

Works, ancak attachEvent'in geri dönüşünü içerir. IFRAME'in DOM'sine, yalnızca aynı alanda bulunan kurslara erişim.

kaynak

2011-05-23 16:05:48 roberkules

onload öğesinin ifrome davranışı vs addEventListener ('load')

cevap

İlgili konular