ID値がグローバル変数に自動追加される

超初歩的なことに、はまってしまった。自分自身の備忘録として残しておこう。

自分で組んだjavascriptコードが chrome で動いたり動かなかったりしたことがきっかけだった。
そのスクリプトは、ブラウザ判定をしてて、chrome、いえ、webkit の検出に以下のようなコードを使用していた。
これ自体は、グーグル検索で辿り着いた、W3G(world wide web guide)というサイトに掲載されていたものを丸々拝借させてもらいました。

// chrome/safari等のオブジェクトを使った判別。
(function(undefined)
{
  var isWebkit = !document.uniqueID && !window.opera && !window.sidebar && window.localStorage && window.orientation === undefined;
})();

さて、ここで、chromeでアクセスしているにもかかわらず、HTMLファイルによってはtrueになったりfalseになったりして ？？？？という状態で、falseと判定されるHTMLを開いてブラウザのコンソールで、調べていったら、 !window.sidebar がfalseになることが判明。

これでピンときた（思い出した）。

あ！、HTMLファイルのある要素(DIVタグ）に id=”sidebar” って属性をつけてるわ・・・。

とほほ。ご存じのように、タグのid属性に指定した値は、グローバル変数に（厳密に言うと、windowオブジェクト）に追加されるんだった・・・orz

いや、確かに昔、Internet Explorer が中心だったころ、よくこれでラクしてたんだよな・・・最近は、document.getElementByIdというDOMメソッドを使用することがほとんどだったので忘れてた。でもIEならともかく・・・webkitでこれに直面するとわおもわなんだ。

結局、元になるHTMLファイルから、sidebar という名のid属性値を、違う値に全部変更することで一件落着。

これから、タグにid属性を含めるときは、必ずハイフンを使用した値にするようにしよう・・・と固く誓うのであった・・・。
というより、こんなIEの独自仕様は端っからwebkitから消し去ってくれればいいのに・・・。