Méthode pour déterminer si l'iframe est chargé avec succès sur la base de JS (divers navigateurs)

Lecture recommandée :

Comment résoudre le chargement lent de JS iFrame

Dans les projets, il est souvent nécessaire d'ajouter dynamiquement des iframes, puis d'effectuer des opérations associées sur les iframes ajoutées, mais souvent, les iframes n'ont pas encore été ajoutées. Eh bien, le code suivant a déjà été exécuté, donc certaines des choses que vous avez écrites ne sont pas affichées du tout. À ce stade, nous devons nous demander si nous pouvons attendre que l'iframe soit chargée avant d'effectuer des opérations ultérieures. Bien sûr, divers navigateurs ont déjà envisagé cela pour nous, voir ci-dessous :

c'est-à-dire le navigateur

Chaque nœud elem d'IE aura un événement onreadystatechange. Cet événement est déclenché à chaque fois que le contenu de l'élément change. Par exemple, le chargement se déclenchera lorsque le contenu est en cours de chargement, le chargement se déclenchera lorsque le contenu sera chargé et le processus complet se déclenchera lorsque le contenu sera chargé. le contenu est chargé avec succès. Trigger, cette fonction doit également coopérer avec readyState, qui est un attribut appartenant à chaque élément sur IE, et est utilisé pour vérifier l'état de chaque déclencheur.

//先为iframe 添加一个 onreadystatechange
iframe.attachEvent("onreadystatechange", function(){
//此事件在内容没有被载入时候也会被触发，所以我们要判断状态
//有时候会比较怪异 readyState状态会跳过 complete 所以我们loaded状态也要判断
if(iframe.readyState === "complete" || iframe.readyState == "loaded"){
//代码能执行到这里说明已经载入成功完毕了
//要清除掉事件
iframe.detachEvent( "onreadystatechange", arguments.callee);
//这里是回调函数
}
});

Autres navigateurs (Firefox, Opera, Chrome, etc.)

Dans d'autres navigateurs non IE, les iframes tels que Firefox, Opera, Chrome, etc. auront un événement onload . Cet événement n'a besoin que lorsqu'il est déclenché, il indique que le contenu a été chargé.

iframe.addEventListener( "load", function(){
//代码能执行到这里说明已经载入成功完毕了
this.removeEventListener( "load", arguments.call, false);
//这里是回调函数
}, false);

Pour résumer

if(iframe.attachEvent){
iframe.attachEvent("onreadystatechange", function() {
//此事件在内容没有被载入时候也会被触发，所以我们要判断状态
//有时候会比较怪异 readyState状态会跳过 complete 所以我们loaded状态也要判断
if (iframe.readyState === "complete" || iframe.readyState == "loaded") {
//代码能执行到这里说明已经载入成功完毕了
//要清除掉事件
iframe.detachEvent("onreadystatechange", arguments.callee);
//这里是回调函数
}
});
}else{
iframe.addEventListener("load", function() {
//代码能执行到这里说明已经载入成功完毕了
this.removeEventListener("load", arguments.call, false);
//这里是回调函数
}, false);
}

Remarque : la fonction ci-dessus doit être placée dans l'iframe après que appendChild soit ajouté au corps, sinon elle ne sera pas déclenchée

Le contenu ci-dessus est petit. L'éditeur vous présente la méthode JS pour déterminer si l'iframe est chargée avec succès. J'espère que cela vous sera utile !

Pour plus d'articles sur les méthodes permettant de déterminer si une iframe est chargée avec succès sur la base de JS (divers navigateurs), veuillez faire attention au site Web PHP chinois !