Existe-t-il un moyen de capturer lorsque le contenu d'une iframe est complètement chargé à partir de la page parent?
Existe-t-il un moyen de capturer lorsque le contenu d'une iframe est complètement chargé à partir de la page parent?
Réponses:
<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 load
auditeur 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
addEventListener
qui permet à plusieurs rappels de s'exécuter sur l'événement de chargement.
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
});
load
est parti. Veuillez utiliser à la .on('load', function() { ... })
place.
jquery
ou jqLite
alors c'est la voie à suivre!
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)
);
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.
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: