¿Cómo puedo detectar si se carga un iframe?

101

Estoy tratando de verificar si se ha cargado un iframe después de que el usuario hace clic en un botón.

yo tengo

$('#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 se carga con la carga de la página inicial.

— Colorete
fuente

Click

— Viktor S.

Respuestas:

185

Puedes probar esto (usando jQuery)

$(function(){
    $('#MainPopupIframe').load(function(){
        $(this).show();
        console.log('iframe loaded successfully')
    });
        
    $('#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>

Expandir fragmento

jsfiddle DEMO .

Actualización: usando simplejavascript

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>

Expandir fragmento

jsfiddle DEMO .

Actualización: también puedes probar esto (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 />

Expandir fragmento

jsfiddle DEMO .

— El alfa
fuente

La solución de vainilla es increíble.

— Nick

load()está en desuso, pero eso es solo porque estaba en conflicto con la función ajax. El reemplazo recomendado es simple on("load"). (Desafortunadamente, los documentos no dejan en claro que eso es todo lo que necesita hacer).

— Teepeemm

"laod el iframe" - El Alfa | Pequeña y agradable edición encubierta de la guerra de guerrillas para proteger el patrimonio: P

— Mohd Abdul Mujib

Buen partido @MohdAbdulMujib, ahora es un clásico :-)

— The Alpha

Nunca antes había visto ese método para crear un elemento adjunto. ES ENCANTADOR, y lo resolvió totalmente para mí. ¡Buen trabajo!

— indextwo

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

— Desislav Kamenov
fuente

También puede probar el evento onload;

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

    };

— Teoman shipahi
fuente