Introduction

ブログ内検索

  • このサイトの記事を検索 by Google

おすすめの一冊!

無料ブログはココログ

« *OBSOLETED* | トップページ | DOM Events サポート判定 »

2011-01-10

DOM Events


Read It Later の Web サイトの使い勝手を改良するグリモンを作ってます。

Read It Later はオンラインのブックマークサービス。 異なるデバイス間(たとえば iPhone と PC とか)でブックマークを共有できます。
もともとが Ajax なサイトなので、ページの読み込み時に ページ要素(表の中身)をグリモンで書き換えたとしても、 コンテンツの切り替えで元のもくあみ。 Twitter の新デザインも同じような Ajax サイトですが、 Twitter はコンテンツを切り替える際に URL も書き換えて くれるので、それを検出すれば対応できました。 具体的には、hashchange イベントを拾えば OK。 で、調べてみると、DOM Events というのが W3C Draft になっていて、 DOM の変更(要素の挿入・削除や属性の変更など)を「イベント」として 扱えるらしいです。 ⇒ Mozilla の DOM Events の説明W3C の DOM Level 3 Events のドラフト さっそく使ってみた結果、以下のことがわかりました。   ・Google Chrome 9.0.597.45 beta では DOMAttrModified イベントは実装されてない。   ・DOMSubtreeModified イベントは Firefox と Google Chrome で使える。Opera 11.00 では未実装。   ・ある ul 要素に対して addEventListener('DOMSubtreeModified', func, true) とできる。   ・DOMSubtreeModified イベントの処理は比較的重いかもしれない。    (まちがってイベントハンドラを多重に登録したら Chrome がしばらく応答しなくなった)    ※このイベントは「同期的」なので注意しないと重くなるらしい。 あと、Read It Later に固有のノウハウですが、    ページの書き換え中は "list" ul 要素に "loading" クラスが一時的に付与されるが、    要素の書き換えが完全に終わる前に除去されてしまう。DOMSubtreeModified イベントハンドラで    "loading" クラスの有無をチェックして、除去された時点で書き換えを行うと、    その後で favicon の img 要素の書き換えが行われて元のもくあみになることがある。    回避策としては、しばらくの間(たとえば 200ms とか)DOMSubtreeModified イベントが    発生しなければ OK とする、みたいなやり方がある:
(function() { var targetElem = document.getElementById('list'); var timer; var prevValue; var handler = function(e) { var value = targetElem.className; if (timer) { window.clearTimeout(timer); } if (timer || ((prevValue == 'loading') && (! value))) { timer = window.setTimeout(function() { timer = undefined; targetElem.parentNode.removeEventListener('DOMSubtreeModified', handler, true); overwrite(targetElem); // 書き換え実行 }, 200); } prevValue = value; }; targetElem.parentNode.addEventListener('DOMSubtreeModified', handler, true); })();
ちょっと美しくないですが、とりあえず動きます。 このグリモンはひとまず完成したのですが、userscripts.org のサーバが 死んでいるので upload できません・・・ そのうち公開しますー p.s. ちなみに、DOM Events は "deprecated" になったらしいです (-_-;

« *OBSOLETED* | トップページ | DOM Events サポート判定 »