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

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

<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

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 
});

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)
);

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.

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/