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


Réponses:


197

<iframe>les éléments ont un loadévénement pour cela.


La manière dont vous écoutez cet événement dépend de vous, mais en général, la meilleure façon est de:

1) Créez votre iframe par programmation

Il s'assure que votre loadauditeur est toujours appelé en l'attachant avant que l'iframe ne commence à se charger.

<script>
var iframe = document.createElement('iframe');
iframe.onload = function() { alert('myframe is loaded'); }; // before setting 'src'
iframe.src = '...'; 
document.body.appendChild(iframe); // add it to wherever you need it in the document
</script>

2) javascript en ligne , est un autre moyen que vous pouvez utiliser dans votre balisage HTML.

<script>
function onMyFrameLoad() {
  alert('myframe is loaded');
};
</script>

<iframe id="myframe" src="..." onload="onMyFrameLoad(this)"></iframe>

3) Vous pouvez également attacher l'écouteur d'événement après l'élément , à l'intérieur d'une <script>balise, mais gardez à l'esprit que dans ce cas, il y a une légère chance que l'iframe soit déjà chargé au moment où vous ajoutez votre auditeur. Il est donc possible qu'il ne soit pas appelé (par exemple si l'iframe est très très rapide, ou provient du cache).

<iframe id="myframe" src="..."></iframe>

<script>
document.getElementById('myframe').onload = function() {
  alert('myframe is loaded');
};
</script>

Voir aussi mon autre réponse sur les éléments qui peuvent également déclencher ce type d' loadévénement


2
Merci, cela fait exactement ce dont j'avais besoin!
Jaime Garcia

1
Avec cette méthode, vous ne pouvez exécuter qu'une seule fonction lorsque l'iframe est chargé. Voir ma réponse ci-dessous en utilisant addEventListenerqui permet à plusieurs rappels de s'exécuter sur l'événement de chargement.
Iest

1
Cette approche est également vulnérable à une condition de concurrence, car l'iframe pourrait se charger avant l'exécution de la balise de script.
Iest

7
L'événement de chargement ne fonctionne pas lorsque vous essayez de télécharger un fichier.
Jerry

1
Oui, cela ne fonctionne pas dans IE si le contenu iFrame n'est pas HTML, par exemple PDF. Voir ceci: connect.microsoft.com/IE/feedback/details/809377/…
Sergey Gussak

27

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

MISE À JOUR :

Comme @doppleganger l'a souligné ci-dessous, la charge a disparu à partir de jQuery 3.0, voici donc une version mise à jour qui utilise on. Veuillez noter que cela fonctionnera réellement sur jQuery 1.7+, vous pouvez donc 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 
});

1
Depuis jQuery 3.0, loadest parti. Veuillez utiliser à la .on('load', function() { ... })place.
Doppelganger

Si vous utilisez jqueryou jqLitealors c'est la voie à suivre!
Peter

11

Il existe une autre méthode cohérente ( uniquement pour IE9 + ) en JavaScript vanille pour cela:

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

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

Et si vous êtes intéressé par Observables, cela fait l'affaire:

return Observable.fromEventPattern(
  handler => iframe.addEventListener('load', handler, true),
  handler => iframe.removeEventListener('load', handler)
);

Est-ce un problème que mon débogueur s'arrête à mon point d'arrêt handleLoad()avant de voir le rendu iFrame? J'espère que c'est purement un problème de rendu plutôt qu'un problème de chargement de contenu.
Sridhar Sarnobat le

que diriez-vous de capturer cet événement par jquery quand l'iframe est déjà là ... c'est à dire: l'iframe n'est pas créé par jquery.
gumuruh

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 lors de l'utilisation des onglets «Ouvrir dans une nouvelle fenêtre» / w.


2
aussi avec des iframes avec aucun affichage;)
Felipe N Moura

1

Vous pouvez également capturer un événement prêt pour jquery de cette façon:

$('#iframeid').ready(function () {
//Everything you need.
});

Voici un exemple de travail:

http://jsfiddle.net/ZrFzF/


16
Je ne pense pas que ce code fasse ce que vous pensez qu'il fait. Vous pouvez remplacer ce sélecteur "#iFrame" dans votre violon par n'importe quoi et l'alerte se déclenche toujours
roryok

6
En plus de @roryok, ready se déclenche lorsque le DOM est prêt, pas la page entière se charge.
Ivan Nikitin

1
ready est déclenché lorsque le DOM est prêt et js peut être exécuté, pas lorsque le contenu est chargé.
Sergey Gussak

2
$ ("# iframeid"). ready déclenche la fonction lorsque l'élément est dans le dom. Pas lorsque l'ifram a fini de se charger.
Popsyjunior

il vient d'appeler une fois :(
Hossein Badrnezhad
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.