Silverlight 1.0 + JavaScript: 試行錯誤を減らすための参考情報 : ブラウザが変わると動かない場合

さきほど遭遇したことを書いておこうと思います。

現在、社内プロジェクトでSilverlightを使ったアプリケーションを作っているのですが、FireFox 2.0.0.6で動作させたら、AJAX通信を行う部分で先に進まない問題を見つけました。しかし、よく見ると、Silverlight自体は動作しているのです。現在のアプリケーションは背景に常時ビデオを流しており、それが再生されないとか動作が途切れたりはしないのです。

これに対して、FireFoxでの問題をSilverlight.netのForumで探しましたがそれらしいものが見つかりません。

そこで、FireFoxでエラーコンソールを表示してみました。すると次のようなエラーがありました。

エラー: document.getElementById("loading") has no properties
ソースファイル: https://<省略> 行: 138

さて、いったい何が起きていたのかをHTMLソースを見ることで見つけることができました。
実は、IDとして"Loading"と書いてあった画像の要素を、"loading"として参照していたのでした。

<img id="Loading" src="loading.gif" mce_src="loading.gif" style="visibility: hidden" alt ="progress" />

FireFoxが表示しているエラーは、idに対して大文字と小文字を区別すると解決できません、と考えれば正当です。IE 7ではこれをエラーとせずに大文字小文字の区別をしていなかったということになります。

このid属性に関する問題の詳細にはここでは触れませんが、クロスブラウザ環境での動作を考えた場合、idの大文字小文字をきちんと区別してXHTMLなりJavaScriptを記述しましょう、というのが本投稿のポイントです。

したがって、IEで動いていたからすんなりFireFoxでも動作すると思って、そうではなかった場合、Silverlightを疑う前に、JavaScriptでのエラーを確認しましょう。意外なところでエラーが見つかるかもしれません。