JSに基づいてiframeが正常に読み込まれているかを判定する方法（各種ブラウザ）

推奨読書:

JS iFrame の読み込みが遅い問題を解決する方法

プロジェクトでは、多くの場合、iframe を動的に追加し、追加された iframe に対して関連する操作を実行する必要があります。多くの場合、次のコードは、iframe を実行する前にすでに実行されています。 iframe が追加されるため、書き込んだ内容の一部がまったく表示されません。この時点で、後続の操作を実行する前に iframe がロードされるまで待機できるかどうかを検討する必要があります。もちろん、さまざまなブラウザーでこれがすでに考慮されています。以下を参照してください:

ie ブラウザー

IE の各要素ノード。このイベントは、要素のコンテンツが変更されるたびにトリガーされます。たとえば、loaded はコンテンツがロードされたときにトリガーされ、complete はコンテンツが正常にロードされたときにトリガーされます。関数は、readyState と連携する必要もあります。これは、IE のすべての要素が所有する属性で、トリガーされるたびにステータスを確認するために使用されます。

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

その他のブラウザ (Firefox、Opera、chrome など)

IE 以外のブラウザ、Firefox、Opera、chrome などでは、このイベントがトリガーされる限り、iframe には onload イベントが存在します。コンテンツがロードされました。

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

要約すると

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

注: 上記の関数は、iframe が本体に appendChild された後に配置する必要があります。そうでない場合、トリガーされません

上記の内容は、iframe が appendChild であるかどうかを判断するためにエディターによって導入された JS メソッドです。無事にロードされました。皆さんのお役に立てれば幸いです。

JS (複数のブラウザー) に基づいて iframe が正常にロードされたかどうかを判断する方法に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。