Heim > Web-Frontend > js-Tutorial > Hauptteil

Methode zur Bestimmung, ob Iframe erfolgreich geladen wurde, basierend auf JS (verschiedene Browser)

高洛峰
Freigeben: 2017-01-12 11:09:42
Original
1306 Leute haben es durchsucht

Empfohlene Lektüre:

So beheben Sie das langsame Laden von JS iFrame

In Projekten ist es häufig erforderlich, Iframes dynamisch hinzuzufügen und dann entsprechende Vorgänge für die hinzugefügten Iframes auszuführen Oft wurden die Iframes noch nicht hinzugefügt. Nun, der nachfolgende Code wurde bereits ausgeführt, sodass einige der von Ihnen geschriebenen Dinge überhaupt nicht angezeigt werden. Zu diesem Zeitpunkt müssen wir überlegen, ob wir warten können, bis der Iframe geladen ist, bevor wir weitere Vorgänge ausführen. Natürlich haben verschiedene Browser dies bereits für uns berücksichtigt, siehe unten:

dh Browser

Jeder Elem-Knoten des IE verfügt über ein onreadystatechange-Ereignis. Dieses Ereignis wird jedes Mal ausgelöst, wenn sich der Elem-Inhalt ändert. „Loading“ wird beispielsweise ausgelöst, wenn der Inhalt geladen wird, und „Complete“ wird ausgelöst, wenn der Inhalt geladen wird Wenn der Inhalt erfolgreich geladen wird, muss diese Funktion auch mit readyState zusammenarbeiten, einem Attribut, das jedem Elem im IE gehört und zur Überprüfung des Status jedes Triggers verwendet wird.

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

Andere Browser (Firefox, Opera, Chrome usw.)

In anderen Nicht-IE-Browsern haben Iframes wie Firefox, Opera, Chrome usw. ein Onload-Ereignis . Dieses Ereignis muss nur angezeigt werden, wenn es ausgelöst wird. Es besagt, dass der Inhalt geladen wurde.

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

Zusammenfassend

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);
}
Nach dem Login kopieren

Hinweis: Die obige Funktion muss im Iframe platziert werden, nachdem appendChild an den Text angehängt wurde, andernfalls wird sie nicht ausgelöst

Der obige Inhalt ist klein. Der Editor stellt Ihnen die JS-Methode vor, um festzustellen, ob der Iframe erfolgreich geladen wurde. Ich hoffe, sie wird Ihnen hilfreich sein!

Weitere verwandte Artikel zu Methoden zur Bestimmung, ob ein Iframe basierend auf JS (verschiedene Browser) erfolgreich geladen wird, finden Sie auf der chinesischen PHP-Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage