ホームページ > 記事 > ウェブフロントエンド > JS におけるブラウザの互換性の問題

JS におけるブラウザの互換性の問題

亚连オリジナル: 2018-06-12 14:19:231343ブラウズ

この記事では、JS のすべてのブラウザと互換性のある DOMContentLoaded イベントの関連情報を主に紹介します。また、DOMContentLoaded イベントを使用して要件を達成することもできます。興味のある友達を登録することもできます。一緒に学んでください

JavaScript を使用して dom 要素を操作する場合、通常、この関数を実装するために dom 要素を取得するためのコードが window.onload=function(){}事件处理函数中，但window.onload事件在某些开始后可能会影响客户体验，因为要等待所有的脚本，css代码和图片等内容加载完毕才会触发此事件，尤其是如果图片量很大的情况下，会严重客户体验。所以很多时候，只需要DOM结构加载完毕即可，jQuery的$(document).ready(function(){}) に配置されます。ここでは、ネイティブ JavaScript がこの関数を実装する方法を紹介します。

実装プロセスの紹介:

標準ブラウザでは、DOMContentLoaded イベントを使用して要件を達成でき、イベント処理関数の登録も非常に簡単です。

コードは次のとおりです:

addEventListener(‘DOMContentLoaded&#39;,fn,false)

ただし、IE8 および IE8 以下のブラウザは DOMContentLoaded イベントをサポートしていないため、この問題を解決するには別の方法が必要です。

document.onreadystatechange イベントの document.readyState ステータスが complete に等しいかどうかを使用して、DOM 構造が読み込まれているかどうかを判断することができると考えている人も多いでしょう。しかし、ページがiframe でサブページを導入すると、問題が発生します。

解決策は次のとおりです:

以前のバージョンの IE ブラウザに固有の doScroll メソッドは、dom 構造体が読み込まれていない場合、このメソッドを呼び出すとエラーが報告されます。そのため、このメソッドを継続的に呼び出すことができます。判定関数の実装には、try catch ステートメントを使用します。

eventQueue = [];
isReady = false;
isBind = false;
function domReady(fn){
 if(isReady){
  fn.call(window);
 }
 else{
  eventQueue.push(fn);
 };
 bindReady();
};
function bindReady(){
 if(isReady) return;
  if(isBind) return;
  isBind=true;
  if(window.addEventListener){
   document.addEventListener(&#39;DOMContentLoaded&#39;,execFn,false);
  }
  else if(window.attachEvent){
   doScroll();
  };
};
function doScroll(){
 try{
  document.documentElement.doScroll(&#39;left&#39;);
 }
 catch(error){
  return setTimeout(doScroll,20);
 };
 execFn();
};
function execFn(){
 if(!isReady){
  isReady=true;
  for(var index=0;i<eventQueue.length;index++){
   eventQueue[index].call(window);
  };
  eventQueue = [];
 };
};
domReady(function(){
 //code
});
domReady(function(){
 //code
});

このコードは、すべてのブラウザと互換性のある DOMContentLoaded エフェクトを実装します。

1. コードのコメント:

(1)。eventQueue = []、実行される関数キューの空の配列を宣言します。

(2).isReady = false、変数を宣言し、初期値をfalseに代入します。trueの場合、domがロードされたことを意味します。

(3).isBind = false、変数を宣言し、初期値をfalseに代入します。 trueの場合、時間処理関数がバインドされていることを意味します。

(4).function domReady(fn){}、この関数は fn 関数を実行する前に dom がロードされるのを待つ関数を実装します。

(5).if(isReady){fn.call(window);}、変数値が true の場合、関数を直接実行します。

(6).else{eventQueue.push(fn);}、実行する関数を配列に追加します。

(7).bindReady()、この関数はイベント処理関数の登録を実現できます。

(8).if(isReady) return、true に等しい場合、この時点で fn 関数が実行されています。

(9).if(isBind) return、既に登録されている場合は再度行う必要はありません。

(10).isBind=true、変数の値を true に変更します。