WEBプログラム覚書::出来ると思ったけど出来なかったJavascriptコード

出来ると思ったけど出来なかった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);
    }
}