こんにちは、martinです。久しぶりの書き庫な気がします。
IE9のプラットフォームプレビュー
が出ていたんで、インストールしてみました。最初に試したことは、他の主要なブラウザでは実装済みのDOMContentLoadedがサポートされているかなぁ、ということでした。現時点では、まだでしたが、IEBlog によると今後のロードマップに、DOMContentLoadedのサポートがあるようです。DOMContentLoaded自体は、DOM Level 3 Eventsには定義されていないので、IE9が標準仕様に忠実であろうとするならば実装は微妙だなぁ、と思っていたんですが、HTML5には定義されています (注意: リンク先はかなりページが重い)ね。
IE9でDOMContentLoadedがサポートされるのはまことに喜ばしいことですが、IE9が普及するのはまだまだずっと先の話でしょう。なので現状では、IE向けにはDOMContentLoaded相当の機能を自前で実装する必要があります。世の中には、jQueryを始めとした便利なJavaScriptライブラリーがいくつかありますが、猫も杓子もDiego Perini氏が発見したdoScrollメソッドを使う手法 に則っています。ppBlogでのoParts.jsでも、doScrollの実行をもって、DOMパース完了とみなすやり方で実装しています。
The doScroll method is available on all objects, regardless of whether they support scrollbars.
- 引用元: doScroll Method (A, ABBR, ACRONYM, ...)
ほぼすべての要素について適応可能です。多くの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.bodyにappendChildする必要もありませんし、メモリーリークも起こしません。以下のようにコメント文を生成するメソッド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()なんて、短い記述で済むんでいいなぁ、と思うけれど。
Comments