Comment déclencher un événement lorsqu'une iframe a fini de se charger en jQuery ?

Question

Je dois charger un PDF dans une page.

Idéalement, j'aimerais avoir un gif animé qui se charge et qui est remplacé une fois le PDF chargé.

Answer 1

Si vous pouvez vous attendre à ce que l'interface d'ouverture/enregistrement du navigateur s'affiche pour l'utilisateur une fois le téléchargement terminé, vous pouvez l'exécuter au moment où vous lancez le téléchargement :

$( document ).blur( function () {
    // Your code here...
});

Lorsque le dialogue s'affiche en haut de la page, l'événement de flou se déclenche.

Answer 2

Puisque après le chargement du fichier pdf, le document iframe aura un nouvel élément DOM <embed/> donc on peut faire la vérification comme ceci :

    window.onload = function () {

    //creating an iframe element
    var ifr = document.createElement('iframe');
    document.body.appendChild(ifr);

    // making the iframe fill the viewport
    ifr.width  = '100%';
    ifr.height = window.innerHeight;

    // continuously checking to see if the pdf file has been loaded
     self.interval = setInterval(function () {
        if (ifr && ifr.contentDocument && ifr.contentDocument.readyState === 'complete' && ifr.contentDocument.embeds && ifr.contentDocument.embeds.length > 0) {
            clearInterval(self.interval);

            console.log("loaded");
            //You can do print here: ifr.contentWindow.print();
        }
    }, 100); 

    ifr.src = src;
}

Answer 3

La solution que j'ai appliquée à cette situation est de placer simplement une image à chargement absolu dans le DOM, qui sera recouverte par la couche de l'iframe après le chargement de celle-ci.

Le z-index de l'iframe doit être (z-index du chargement + 1), ou juste supérieur.

Par exemple :

.loading-image { position: absolute; z-index: 0; }
.iframe-element { position: relative; z-index: 1; }

J'espère que cela vous aidera si aucune solution javaScript ne l'a fait. Je pense vraiment que CSS est la meilleure pratique pour ces situations.

Meilleures salutations.

Answer 4

function frameLoaded(element) {
    alert('LOADED');
};

 <iframe src="https://google.com" title="W3Schools Free Online Web Tutorials" onload="frameLoaded(this)"></iframe>