web-dev-qa-db-fra.com

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

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

javascripthtmliframeloaddhtml
89
Jaime Garcia

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

La façon dont vous écoutez cet événement dépend de vous, mais le meilleur moyen consiste généralement à:

1) créez votre iframe par programmation

Il s'assure que votre écouteur load est toujours appelé en l'attachant avant l'iframe 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 inline, est une autre façon d'utiliser le 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, dans une balise <script>, mais gardez à l'esprit que dans ce cas, il y a une faible chance que l'iframe soit déjà chargé au moment où vous obtenez ajouter votre auditeur. Par conséquent, il est possible que le non soit appelé (par exemple, si l’iframe est très rapide ou provient du cache).

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

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

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

138
gblazex

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

METTRE &AGRAVE; JOUR:

Comme @doppleganger l'a souligné ci-dessous, la charge a disparu depuis 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 le mettre en œuvre même si vous n'êtes pas encore sur jQuery 3.0. 

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

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

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

Voici un exemple de travail:

http://jsfiddle.net/ZrFzF/

5
Gonza Oviedo

Il existe un autre moyen cohérent ( uniquement pour IE9 + ) dans Vanilla 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 Observables cela fait l'affaire:

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

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

1
Kenneth M. Kolano