Comment puis-je détecter si une iframe est chargée?

101

J'essaye de vérifier si une iframe s'est chargée après que l'utilisateur clique sur un bouton.

j'ai

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

Aucune suggestion?

Au fait, mon iframe est créé dynamiquement. Il ne se charge pas avec le chargement initial de la page.

— Rouge
source

Cliquez

— Viktor S.

Réponses:

185

Vous pouvez essayer ceci (en utilisant 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>

Développer l'extrait

jsfiddle DEMO .

Mise à jour: utilisation de plainjavascript

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>

Développer l'extrait

jsfiddle DEMO .

Mise à jour: vous pouvez également essayer ceci (iframe dynamique)

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

Développer l'extrait

jsfiddle DEMO .

— L'Alpha
source

La solution vanille est géniale.

— Nick

load()est obsolète, mais c'est simplement parce qu'il était en conflit avec la fonction ajax. Le remplacement recommandé est simplement on("load"). (Malheureusement, la documentation ne précise pas que c'est tout ce que vous devez faire.)

— Teepeemm

"Laod the iframe" - L'Alpha | Belle petite guerre de guérilla de montage sous couverture en cours pour protéger le patrimoine: P

— Mohd Abdul Mujib

Bonne prise @MohdAbdulMujib, c'est maintenant un classique :-)

— The Alpha

Je n'avais jamais vu cette méthode pour créer un élément ajouté auparavant. EST MAGNIFIQUE, et totalement résolu pour moi. Bon travail!

— indextwo

J'imagine ceci comme ça:

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

Vous pouvez également essayer l'événement 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');

    };

— Shipahi Teoman
source