web-dev-qa-db-fra.com

Comment vérifier si l'iframe est chargé ou s'il a un contenu?

J'ai un iframe avec id = "myIframe" et voici mon code pour charger son contenu:

$('#myIframe').attr("src", "my_url");

Le problème est que parfois, le chargement prend trop de temps et parfois, il se charge très rapidement. Je dois donc utiliser la fonction "setTimeout":

setTimeout(function(){
   if (//something shows iframe is loaded or has content)
   {
       //my code
   }
   else
   {
       $('#myIframe').attr("src",""); //stop loading content
   }
},5000);

Tout ce que je veux savoir, c'est comment savoir si un iFrame est chargé ou s'il a un contenu. L'utilisation de iframe.contents().find() ne fonctionnera pas. Je ne peux pas utiliser iframe.load(function(){}).

javascriptjqueryiframe
68
newbie29

Essaye ça.

<script>
function checkIframeLoaded() {
    // Get a handle to the iframe element
    var iframe = document.getElementById('i_frame');
    var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

    // Check if loading is complete
    if (  iframeDoc.readyState  == 'complete' ) {
        //iframe.contentWindow.alert("Hello");
        iframe.contentWindow.onload = function(){
            alert("I am loaded");
        };
        // The loading is complete, call the function we want executed once the iframe is loaded
        afterLoading();
        return;
    } 

    // If we are here, it is not loaded. Set things up so we check   the status again in 100 milliseconds
    window.setTimeout(checkIframeLoaded, 100);
}

function afterLoading(){
    alert("I am here");
}
</script>

<body onload="checkIframeLoaded();">
70
Biranchi

veuillez utiliser:

$('#myIframe').on('load', function(){
    //your code (will be called once iframe is done loading)
});

Mise à jour de ma réponse à mesure que les normes changeaient.

40
pratikabu

Option la plus simple:

<script type="text/javascript">
  function frameload(){
   alert("iframe loaded")
  }
</script>

<iframe onload="frameload()" src=...>
14
Orane

J'ai eu le même problème et ajouté à cela, je devais vérifier si iframe est chargé indépendamment de la politique inter-domaines. Je développais une extension chrome qui injecte certains scripts sur une page Web et affiche du contenu de la page parent dans un iframe. J'ai essayé de suivre l'approche et cela a fonctionné parfaitement pour moi.
P.S .: Dans mon cas, je contrôle le contenu dans iframe mais pas sur le site parent. (Iframe est hébergé sur mon propre serveur)

Première:
Crée un iframe avec un data- attribut dedans comme (cette partie était en script injecté dans mon cas)
<iframe id="myiframe" src="http://anyurl.com" data-isloaded="0"></iframe>

Maintenant, dans le code iframe, utilisez:

var sourceURL = document.referrer;
window.parent.postMessage('1',sourceURL);



Revenons maintenant au script injecté selon mon cas:

setTimeout(function(){
  var myIframe = document.getElementById('myiframe');
  var isLoaded = myIframe.prop('data-isloaded');
  if(isLoaded != '1')
  {
    console.log('iframe failed to load');
  } else {
    console.log('iframe loaded');
  }
},3000);


et,

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
    if(event.Origin !== 'https://someWebsite.com') //check Origin of message for security reasons
    {
        console.log('URL issues');
        return;
    }
    else {
        var myMsg = event.data;
        if(myMsg == '1'){
            //8-12-18 changed from 'data-isload' to 'data-isloaded
            $("#myiframe").prop('data-isloaded', '1');
        }
    }           
}



Cela ne répond peut-être pas exactement à la question, mais c’est bien un cas possible de cette question que j’ai résolu par cette méthode.

10
Tushar Shukla

Je ne sais pas si vous pouvez déterminer s'il est chargé ou non, mais vous pouvez déclencher un événement une fois le chargement terminé:

$(function(){
    $('#myIframe').ready(function(){
        //your code (will be called once iframe is done loading)
    });
});

EDIT: Comme l'a souligné Jesse Hallett, cela se déclenchera toujours lorsque le iframe sera chargé, même s'il l'a déjà été. Donc, si le iframe a déjà été chargé, le rappel s'exécutera immédiatement.

6
skimberk1

Vous pouvez utiliser l'événement load de l'iframe pour répondre lors du chargement de l'iframe.

document.querySelector('iframe').onload = function(){
    console.log('iframe loaded');
};

Cela ne vous dira pas si le contenu correct est chargé: Pour vérifier cela, vous pouvez inspecter le contentDocument.

document.querySelector('iframe').onload = function(){
    var iframeBody = this.contentDocument.body;
    console.log('iframe loaded, body is: ', body);
};

La vérification de contentDocument ne fonctionnera pas si l'iframe src pointe vers un domaine différent de celui où votre code est en cours d'exécution.

5
Max Heiber

dans mon cas, c'était un cadre d'origine croisée et le chargement ne se faisait pas parfois. la solution qui a fonctionné pour moi est la suivante: si le chargement est réussi, si vous essayez ce code:

var iframe = document.getElementsByTagName('iframe')[0];
console.log(iframe.contentDocument);

cela ne vous permettra pas d'accéder à contentDocument et de générer une erreur d'origine croisée. Cependant, si frame n'est pas chargé avec succès, alors contentDocument renverra un #document objet

4
Raza Ahmed

Quand un iFrame se charge, il contient initialement le #document. Par conséquent, il est préférable de vérifier l'état de chargement en vérifiant ce qu'il y a maintenant.

if ($('iframe').contents().find('body').children().length > 0) {
    // is loaded
} else {
    // is not loaded
}
2
obimod

Une méthode vraiment géniale est d'utiliser jQuery AJAX. Le cadre parent ressemblerait à ceci:

<iframe src="iframe_load.php" style="width: 100%; height: 100%;"></iframe>

Le fichier iframe_load.php chargerait la bibliothèque jQuery et un JavaScript qui tente de charger l'URL de destination dans un AJAX GET:

var the_url_to_load = "http://www.your-website.com" ;
$.ajax({
            type: "GET",
            url: the_url_to_load,
            data: "",
            success: function(data){
                // if can load inside iframe, load the URL
                location.href = the_url_to_load ;
            },
            statusCode: {
                500: function() {
                    alert( 'site has errors' ) ;
                }
            },
            error:function (xhr, ajaxOptions, thrownError){
                // if x-frame-options, site is down or web server is down
                alert( 'URL did not load due to x-frame-options' ) ;
            } });

IMPORTANT La destination doit contenir l'en-tête "Access-Control-Allow-Origin". Exemple en PHP:

HEADER( "Access-Control-Allow-Origin: *" ) ;
0
Nate Skate

Si vous avez besoin de savoir quand l'iframe est prêt à être manipulé, utilisez un intervalle. Dans ce cas, je "ping" le contenu toutes les 250 ms et s'il y a tout contenu dans la cible iframe, arrêtez le "ping" et faites quelque chose.

var checkIframeLoadedInterval = setInterval( checkIframeLoaded, 250 );

function checkIframeLoaded() {
    var iframe_content = $('iframe').contents();

    if (iframe_content.length > 0) {
        clearInterval(checkIframeLoadedInterval);

        //Apply styles to the button
        setTimeout(function () {
            //Do something inside the iframe 
            iframe_content.find("body .whatever").css("background-color", "red");
        }, 100); //100 ms of grace time
    }
}
0
Jimmy Adaro