IE9ではDOMContentLoaded をサポートするようだ

category-icon

 こんにちは、martinです。久しぶりの書き庫な気がします。

 IE9のプラットフォームプレビューLink が出ていたんで、インストールしてみました。最初に試したことは、他の主要なブラウザでは実装済みのDOMContentLoadedがサポートされているかなぁ、ということでした。現時点では、まだでしたが、IEBlogLink によると今後のロードマップに、DOMContentLoadedのサポートがあるようです。DOMContentLoaded自体は、DOM Level 3 Eventsには定義されていないので、IE9が標準仕様に忠実であろうとするならば実装は微妙だなぁ、と思っていたんですが、HTML5には定義されていますLink (注意: リンク先はかなりページが重い)ね。

 IE9でDOMContentLoadedがサポートされるのはまことに喜ばしいことですが、IE9が普及するのはまだまだずっと先の話でしょう。なので現状では、IE向けにはDOMContentLoaded相当の機能を自前で実装する必要があります。世の中には、jQueryを始めとした便利なJavaScriptライブラリーがいくつかありますが、猫も杓子もDiego Perini氏が発見したdoScrollメソッドを使う手法Link に則っています。ppBlogでのoParts.jsでも、doScrollの実行をもって、DOMパース完了とみなすやり方で実装しています。

 さて、このdoScrollメソッドですが、MSDNの説明にあるように、

The doScroll method is available on all objects, regardless of whether they support scrollbars.

引用元: doScroll Method (A, ABBR, ACRONYM, ...)Link

 ほぼすべての要素について適応可能です。多くのJavaScriptライブラリーでは、

document.documentElement.doScroll('left');

 というふうに、document.documentElementに適用しているケースが殆どですが、何でも良いので、以下のようなやつもOKです。

(function(){
  if(navigator.userAgent.match(/MSIE/)){ // IEなら
   try {
     new Image().doScroll(); // new Imageオブジェクトについて適用
     onReadyFunc(); // DOM構築後に最初に呼び出す関数
   } catch(e){ setTimeout(arguments.callee, 1);}
  } else { // IE以外
   document.addEventListener("DOMContentLoaded", onReadyFunc, false); // DOM Level 3 Events相当
  }
})();

 別にnew Imageオブジェクトをdocument.bodyappendChildする必要もありませんし、メモリーリークも起こしません。以下のようにコメント文を生成するメソッドcreateComment()を用いても良いでしょう。これも、既存の文書に作ったコメントをappendする必要はなく、ただ宣言するだけで動きます。

(function(){
  if(navigator.userAgent.match(/MSIE/)){ // IEなら
   try {
     document.createComment().doScroll(); // document.createCommentについて適用
     onReadyFunc(); // DOM構築後に最初に呼び出す関数
   } catch(e){ setTimeout(arguments.callee, 1);}
  } else { // IE以外
   document.addEventListener("DOMContentLoaded", onReadyFunc, false); // DOM Level 3 Events相当
  }
})();

 doScroll()の引数は省略可能です。省略するとscrollbarDownが適用されるので、document.documentElement.doScroll()だと、実際に画面がスクロールしてしまうかもしれません(なのでたいてい”left”を指定している)。new ImageやcreateCommentだと、DOMツリーに追加するわけではないので引数は省略して構いません。

 new Image().doScroll()なんて、短い記述で済むんでいいなぁ、と思うけれど。

 


— posted by martin at 09:50 am   commentComment [2]  pingTrackBack [0]

T: Y: ALL: Online:
Created in 0.0122 sec.
prev
2010.3
next
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31