2012-09-04 25 views
80

Kullanıcı bir düğmeyi tıklattıktan sonra bir iframe'in yüklü olup olmadığını kontrol etmeye çalışıyorum.Iframe'in yüklü olup olmadığını nasıl anlarım?

Ben

$('#MainPopupIframe').load(function(){ 
    console.log('load the iframe') 
    //the console won't show anything even if the iframe is loaded. 
}) 

HTML

<button id='click'>click me</button> 

//the iframe is created after the user clicks the button. 
<iframe id='MainPopupIframe' src='http://...' />...</iframe> 

herhangi bir öneriniz?

Bu arada, iframe dinamik olarak oluşturulur. İlk sayfa yüklemesiyle yüklenmez. Bu (jQuery kullanarak)

+0

[Click] (http://stackoverflow.com/questions/205087/jquery-ready-in-a-dynamically-inserted-iframe) –

cevap

150

Sen

$(function(){ 
 
    $('#MainPopupIframe').load(function(){ 
 
     $(this).show(); 
 
     console.log('laod the iframe') 
 
    }); 
 
     
 
    $('#click').on('click', function(){ 
 
     $('#MainPopupIframe').attr('src', 'https://heera.it');  
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id='click'>click me</button> 
 

 
<iframe style="display:none" id='MainPopupIframe' src='' /></iframe>

jsfiddle DEMO deneyebilirsiniz. Düz javascript

window.onload=function(){ 
 
    var ifr=document.getElementById('MainPopupIframe'); 
 
    ifr.onload=function(){ 
 
     this.style.display='block'; 
 
     console.log('laod the iframe') 
 
    }; 
 
    var btn=document.getElementById('click');  
 
    btn.onclick=function(){ 
 
     ifr.src='https://heera.it';  
 
    }; 
 
};
<button id='click'>click me</button> 
 

 
<iframe style="display:none" id='MainPopupIframe' src='' /></iframe>

jsfiddle DEMO kullanma:

Güncelleme.

Güncelleme: Ayrıca bu (dinamik iframe) deneyebilirsiniz

$(function(){ 
 
    $('#click').on('click', function(){ 
 
     var ifr=$('<iframe/>', { 
 
      id:'MainPopupIframe', 
 
      src:'https://heera.it', 
 
      style:'display:none;width:320px;height:400px', 
 
      load:function(){ 
 
       $(this).show(); 
 
       alert('iframe loaded !'); 
 
      } 
 
     }); 
 
     $('body').append(ifr);  
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id='click'>click me</button><br />

jsfiddle DEMO .

+9

'yük()' dır [kaldırıldı] (http://api.jquery.com/category/deprecated/)? – adeneo

+0

Cevabınız için teşekkürler Şeyh. Ancak, sayfa yüklendiğinde MainpopupIframe öğelerine sahip değilim. MainpopipIframe, kullanıcı düğmeyi tıkladığında oluşturuldu. Yani .load fonksiyonu benim durumumda çalışmıyor. Neyse ihtiyacım olan sonucu arşivlemek için? Teşekkürler. +1 – Rouge

+0

@Rouge, güncellenmiş cevabı deneyin. Bunu beğenebilirsin. Teşekkürler :-) –

1

Ben böyle bu hayal edin:

<html> 
<head> 
<script> 
var frame_loaded = 0; 
function setFrameLoaded() 
{ 
    frame_loaded = 1; 
    alert("Iframe is loaded"); 
} 
$('#click').click(function(){ 
    if(frame_loaded == 1) 
    console.log('iframe loaded') 
    } else { 
    console.log('iframe not loaded') 
    } 
}) 
</script> 
</head> 
<button id='click'>click me</button> 

<iframe id='MainPopupIframe' onload='setFrameLoaded();' src='http://...' />...</iframe> 
0

Siz de onload olayı deneyebilirsiniz;

var createIframe = function (src) { 
     var self = this; 
     $('<iframe>', { 
      src: src, 
      id: 'iframeId', 
      frameborder: 1, 
      scrolling: 'no', 
      onload: function() { 
       self.isIframeLoaded = true; 
       console.log('loaded!'); 
      } 
     }).appendTo('#iframeContainer'); 

    }; 
İlgili konular