出来ると思ったけど出来なかったJavascriptコード

| 2008年06月27日 20:22

「innerText」はFirefoxで利用できないようなので、try~catchで分岐させようと思ったけどダメだった。

Javascriptエラーテスト

サンプルコード


/* -----------------------------------

   Javascript

----------------------------------- */
onload = function()
{
    // エラーにならない
    try {
        var t = document.getElementById("SampleText").childNodes[0].innerText;
    }
    catch(e) {
        var t = document.getElementById("SampleText").childNodes[1].textContent;
    }
    
    var bt1 = document.getElementById("Alert1");
    bt1.onclick = function() {
        alert(t);
    }
    
    // エラーになる
    try {
        var t2 = document.getElementById("DummySampleText").childNodes[0].innerText;
    }
    catch(e) {
        /* IEがここで死ぬんで回避
        var t2 = document.getElementById("SampleText").childNodes[1].textContent;
        */
        var t2 = "Javascriptテスト";
    }
	
    var bt2 = document.getElementById("Alert2");
    bt2.onclick = function() {
        alert(t2);
    }
	
    // エラーにならない
    try {
        var t3 = document.getElementById("DummySampleText");
    }
    catch(e) {
        var t3 = document.getElementById("SampleText").childNodes[1].textContent;
    }

    var bt3 = document.getElementById("Alert3");
    bt3.onclick = function() {
        alert(t3);
    }
}

/* -----------------------------------

    HTML

----------------------------------- */
<div id="SampleText">
    <p>Javascript のテスト</p>
</div>
<input type="button" value="ボタン1" id="Alert" />
<input type="button" value="ボタン2" id="Alert2" />
<input type="button" value="ボタン3" id="Alert3" />


実行結果

Javascript のテスト

  • オブジェクトの存在しないプロパティ(?)の参照はエラーとならない。
  • 存在しないオブジェクトの参照はエラー。
  • オブジェクトの取得失敗はエラーとならない。

ブラウザ判定による分岐

結局try~catchでは分岐できないので、何がしかの分岐処理を実装する必要がある。


if (t == "undefined") {
   var t = document.getElementById("SampleText").childNodes[1].textContent;
}

一番簡単だけど、いまいち汎用性に乏しいのでいいブラウザ判定ないかと見てみたら jQueryのブラウザ判定がすっきりしてていい感じだったので採用。

jQueryのブラウザ判定部分を利用したサンプル


onload = function()
{
    // jQuery ブラウザ判定部分を拝借
    var userAgent = navigator.userAgent.toLowerCase();
    var browser = {
        version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1],
        safari: /webkit/.test( userAgent ),
        opera: /opera/.test( userAgent ),
        msie: /msie/.test( userAgent ) &amp;&amp; !/opera/.test( userAgent ),
        mozilla: /mozilla/.test( userAgent ) &amp;&amp; !/(compatible|webkit)/.test( userAgent )
    };
	
    if (browser.msie) {
        var t4 = document.getElementById("SampleText").childNodes[0].innerText;
    } else {
        var t4 = document.getElementById("SampleText").childNodes[1].textContent;
    }
    var bt4 = document.getElementById("Alert4");
    bt4.onclick = function() {
        alert(t4);
    }
}

実行結果

勉強のためライブラリを利用しないようにしてたけど、 やっぱり便利だすどす。ってことで今さらながらjQuery使っていきますかねー。

jQueryで作る Ajaxアプリケーション

著者 : 沖林 正紀 / 金額 : ¥ 2,919

kantenna.com 最新更新ページ

出来ると思ったけど出来なかったJavascriptコードタグ:

トラックバック

  • http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/412
[WEBプログラム覚書]2009年01月29日 22:41
最小?IEブラウザ判定
javascriptで「12文字」でIEを判別するスクリプト
コメント (0)
コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)





この情報を登録しますか?