2011-11-22 25 views
10

Komut dosyası, kullanıcı bir düğmeyi tıkladığında iframe yükler. Iframe yüklendikten sonra başka bir işlev aramak istiyorum, ancak çalışmıyor. Iframe normal olarak yüklenir, ancak iframe yüklemeyi bitirdikten sonra .load() olayı asla çağrılmaz. Iframe aynı web sitesindeki içeriği içerir (harici içerik yok). Tuhaf olan şey, kodumdaki birkaç başka noktada aşağıda açıklanan tekniği kullanıyorum ve mükemmel çalışıyor. Bir daha ne kontrol etmem gerektiğini öneren var mı?jQuery onload - .load() - olayı dinamik olarak yüklenmiş iframe ile çalışmayan

$('#myIframe').load(function() { 
    alert('iframe loaded'); 
}); 

$('#someButton').live('click', function() { 
    $('body').append($('<iframe id="myIframe" src="https://www.mywebsite.com" width="100%"></iframe>')); 
}); 

cevap

10

burada soruya biraz benzer görünüyor:

jQuery .ready in a dynamically inserted iframe

Iframe eleman append ile Dom var Bu şekilde

İlgili kod İşte. Yalnızca URL'yi yüklediğinizde yüklenir, hangi noktada sonuna kadar etiketlemek istediğiniz yük fonksiyonunu eklediniz. Yani kod

$('#someButton').live('click', function() { 

    $('body').append($('<iframe id="myIframe" width="100%"></iframe>')); 
    $('#myIframe').attr('src',"https://www.mywebsite.com"); 

    $('#myIframe').load(function() { 
     alert('iframe loaded'); 
    }); 

}); 
+1

Firefox ile benzer bir hataya rastladım. Özellikle, yeni bir "iframe" öğesi oluşturuldu ve DOM'a eklendiyse ancak bir "src" özniteliği belirtilmezse, 'load' olayı hala tetiklenir. Kullanım durumumu ayrıntılı olarak anlattım ve herkesin aynı şeyle karşılaşmasını sağladım: http://web.onassar.com/blog/2013/03/03/firefox-is-calling-the-load-event-to-soon -on-bir-frame / – onassar

1
bunu load bağlı hiçbir olay işleyicisi sahip olduğunda o zaman DOM içine öğe yerleştirmeyi, var olmayan bir öğeye bağlayıcı çünkü kod örneği çalışmıyor sebebi

Etkinlik. Bu deneyin:

$('#someButton').live('click', function() { 
    var $iframe = $('<iframe id="myIframe" src="" width="100%"></iframe>').load(function() { 
     alert('iframe loaded'); 
    }).attr('src', 'https://www.mywebsite.com'); 
    $('body').append($iframe); 
}); 

Veya origional kodunun yakınına, sen yerini alabilir .load().live('load') ile:

$('#myIframe').live('load', function() { 
    alert('iframe loaded'); 
}); 

$('#someButton').live('click', function() { 
    $('body').append('<iframe id="myIframe" src="https://www.mywebsite.com" width="100%"></iframe>');//notice I removed the $() around the append code as it is unnecessary 
}); 
0

Eğer iframe'de yüklüyorsunuz belge kontrol şey ise, yük işleyicisi koymayı deneyin bu belgeye. iframe yüklendikten sonra bir şeyler yapmak üst belge gerekirse çocuktan ebeveyn bir işlevini çağırabilirsiniz: Deneyin

// in parent doc 
function myIframeLoaded() { 
    // do something 
} 

// in iframe doc 
$(document).load(function() { // or .ready() 
    parent.myIframeLoaded(); 
} 
1

bu: Sadece bazı zincirleme eklenen eleman yarattı

$("<iframe id='myId'></iframe>").appendTo("body") 
    .attr('src', url) 
    .load(function() 
    { 
     callback(this); 
    }); 

Seçicinin genellikle nereye gittiği (bu mümkün) ve vücuda eklenir.

İlgili konular