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]

この記事に対するコメント・トラックバック [2件]

scrollUp1. ちらみ — 2010/03/31@22:41:47

お久しぶりです。

私はとりあえず複数画像同時アップロード機能をお待ちしてま~す;v)
いっぱい写真をアップする時、途中でやめたくなります(笑

Owner Comment martin Website  2010/04/01@22:07:39

ご無沙汰してます。
確かに、自分も写真が沢山あるときはめんどいなぁと思うので、それを最優先にいじろうかと思います。

この記事に対する TrackBack URL:

設定によりTB元のページに、こちらの記事への言及(この記事へのリンク)がなければ、TB受付不可となりますのであらかじめご了承下さい。

コメントをどうぞ。 名前(ペンネーム)と画像認証のひらがな4文字は必須で、ウェブサイトURLはオプションです。

ウェブサイト (U):

タグは使えません。http://・・・ は自動的にリンク表示となります

:) :D 8-) ;-) :P :E :o :( (TT) ):T (--) (++!) ?;w) (-o-) (**!) ;v) f(--; :B l_P~

     
T: Y: ALL: Online:
Created in 0.0360 sec.
prev
2017.4
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