DOMContentLoadedとGreasemonkey

今ごろ、まるごとJavaScript & Ajax ! Vol.1を読んでいたら、こんな記事が。

[ThinkIT] 第2回：jQueryライブラリの内部とonloadイベント記法 (2/2)
http://www.thinkit.co.jp/cert/article/0703/10/2/2.htm

通常のonloadイベントではページ内の全ての画像ファイル等の読み込みも完了してからコードが実行されるのに対し、jquery.jsはHTMLのDOM解析が完了した途端にコードを実行できるアクセラレーション機能を備えています（注4）。

おおすごいなーと。
ライブラリなしでも使いたいなーと思っていたら、

window.onload 前でも DOM 処理が可能なら通知してくれる domready.js - METAREAL
http://weblog.metareal.org/2007/07/10/domready-js-cross-browser-ondomcontentloaded/

DOM 読み込み完了のタイミングで、任意の関数を実行できるようにする JavaScript ライブラリを書いてみた。

* domready.js

mootools の同様の機能を基にしていて、単体として使いやすいように外部ライブラリへの依存性をなくし、prototype.js とも併用できるようにしたもの。

タイムリー！
激しくGJ！


で、使ってみたのですが、特定の処理をしているグリモンを入れていると、この手法で登録したイベントが動作しない現象に遭遇したのでメモ。

(function(){

document.body.innerHTML = document.body.innerHTML.replace(/hoge/g, 'hige');

})();

登録されたイベントが、DOMの再描画の際に外れる。

Greasemonkeyスクリプトは今回の手法と同じタイミング（FirefoxではDOMContentLoaded）で実行されてるのだけど、この動作を見るとページ上のJavascriptで定義されたコードの後に実行されてるっぽい。

・上記ライブラリでイベント登録
　　　　　　　　↓
・Greasemonkeyでdocument.bodyの書き換え
　　　　　　　　↓
・ブラウザがDOMを再構築
　　　　　　　　↓
・登録されていたイベントが解除される

という流れ。


window.onload 前でも DOM 処理が可能なら通知してくれる domready.js - METAREAL
http://weblog.metareal.org/2007/07/10/domready-js-cross-browser-ondomcontentloaded/

嬉しいことに、prototype.js にも近いうちに同様の機能を取り込もう、という動きがあるようだ。

• #5414 (PATCH) Faster onload for Event.onload
• Changeset 6596: Support for “DOMContentLoaded” event handling (prototype.js event branch)

ということなので、今後、使われることが増えそうだ。

なので、現状では、上記のような力業のグリモンをすべてのサイトに適用したりしないように注意が必要かも。


この手法の発案者

Dean Edwards: window.onload (again)
http://dean.edwards.name/weblog/2006/06/again/


参考

Ajaxian DOMContentLoaded.Next
http://ajaxian.com/archives/domcontentloadednext

戦争 - ドキュメントのロード完了に合わせて関数を実行する
http://d.hatena.ne.jp/brazil/20060105/1136404226