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 ) && !/opera/.test( userAgent ),
        mozilla: /mozilla/.test( userAgent ) && !/(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使っていきますかねー。

WEBデザイン・ホームページ製作カンテナ

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

Javascriptエラーテスト

サンプルコード

実行結果

ブラウザ判定による分岐

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

実行結果

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

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

トラックバック

コメントを投稿

最新更新ページ

ETC

HTML/CSS

JavaScript

MySQL

PHP

XML

最近のエントリー

タグ

アーカイブ

このサイトは次のライセンスで保護されています。

IT業界、エンジニア関連の求人

Twitter Updates