¿Cómo puedo detectar si un iframe está cargado?

Estoy tratando de verificar si un iframe se ha cargado después de que el usuario haga clic en un botón.¿Cómo puedo detectar si un iframe está cargado?

que he

$('#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>

¿Alguna sugerencia?

Por cierto, mi iframe se crea dinámicamente. No carga con la carga de la página inicial.

Fuente

2012-09-04 Rouge

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

150

Usted puede probar esto (usando jQuery)

$(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.

Actualización: Usando llanura 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.

Actualización: También puede probar esta (iframe dinámico)

$(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.

Fuente

2012-09-04 15:54:55

'carga()' es [obsoleta] (http://api.jquery.com/category/deprecated/)? – adeneo

Gracias por la respuesta Sheikh. Sin embargo, no tengo elementos MainpopupIframe disponibles cuando se carga la página. El MainpopipIframe se creó después de que el usuario haga clic en el botón. entonces la función .load no funciona en mi caso. De todos modos para archivar el resultado que necesitaba? Gracias. +1 – Rouge

@Rouge, pruebe la respuesta actualizada. Puede que te guste esto. Gracias :-) –

Me imagino que esto así:

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

Fuente

2012-09-04 15:57:13

Usted puede intentar proceso de carga, así;

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'); 

    };

Fuente

2017-12-07 22:34:54

¿Cómo puedo detectar si un iframe está cargado?

Respuesta

Cuestiones relacionadas