Capturer l'événement complet de chargement d'iframe

Question

Existe-t-il un moyen de capturer lorsque le contenu d'une iframe a été complètement chargé à partir de la page parent ?

Answer 1

Aucune des réponses ci-dessus n'a fonctionné pour moi, mais cela a

MISE À JOUR :

Comme @doppleganger l'a souligné ci-dessous, le chargement est parti à partir de jQuery 3.0, donc voici une version mise à jour qui utilise on. Veuillez noter que cela fonctionnera en fait sur jQuery 1.7+, de sorte que vous pouvez l'implémenter de cette façon même si vous n'êtes pas encore sur jQuery 3.0.

$('iframe').on('load', function() {
    // do stuff 
});

Answer 2

Il y a une autre façon cohérente (seulement pour IE9+) dans vanille JavaScript pour cela :

const iframe = document.getElementById('iframe');
const handleLoad = () => console.log('loaded');

iframe.addEventListener('load', handleLoad, true)

Et si vous êtes intéressé par les observables cela fait l'affaire :

import { fromEvent } from 'rxjs';

const iframe = document.getElementById('iframe');

fromEvent(iframe, 'load').subscribe(() => console.log('loaded');

Answer 3

Notez que l'événement onload ne semble pas se déclencher si l'iframe est chargé lorsqu'il est hors écran. Cela se produit fréquemment lorsque vous utilisez les onglets "Ouvrir dans une nouvelle fenêtre" /w.

Answer 4

Étape 1 : Ajoutez iframe dans le modèle.

<iframe id="uvIFrame" src="www.google.com"></iframe>

Étape 2 : Ajouter un écouteur de charge dans le contrôleur.

document.querySelector('iframe#uvIFrame').addEventListener('load', function () {
  $scope.loading = false;
  $scope.$apply();
});