Javascript小僧：UA, cc_on, ラジオボタンのブラウザによる違い

デジタル時計で苦労したUA(ユーザーエージェント), cc_on(条件コンパイル), ラジオボタンのブラウザによる違いについて、まとめました。表にまとめると、こうなります。

ブラウザ	msie	trident	cc_on	checked	fireEvent	dispatchEvent
IE8	8.0	4.0	有効	NG	OK	NG
IE9	9.0	5.0	有効	NG?	OK?	NG?
IE10	10.0	6.0	無効	NG?	NG?	OK?
IE11	-	7.0	無効	NG	NG	OK
Firefox26	-	-	無効	OK	NG	OK
Chrome32	-	-	無効	OK	OK	OK

各項目の説明を以下に記します。

ブラウザ	ブラウザの種類。なお、IE9, IE10については環境が無いので動作検証はしていません。
msie	UA(ユーザーエージェント, navigator.userAgent)にmsieがある場合は、そのversion番号を、無い場合は「-」
trident	UA(ユーザーエージェント, navigator.userAgent)にtridentがある場合は、そのversion番号を、無い場合は「-」
cc_on	条件コンパイル。if( /*@cc_on ! @*/ false ){}をif(! false){} と解釈する場合は有効、if(false){}と解釈する場合は無効
checked	checked属性にtrue/falseを設定することにより、ラジオボタンを設定できる場合はOK、できない場合はNG
fireEvent	fireEventにより、ラジオボタンの設定ができる場合はOK、できない場合はNG。
dispatchEvent	dispatchEventにより、ラジオボタンの設定ができる場合はOK、できない場合はNG

つまり、Javascriptでラジオボタンを設定しようとするとブラウザごとに扱いがまちまちで、考慮が必要ということです。IEはversionごとの違いもあり、とほほです。

１．UAのtridentでIEか否かを判定。
２．IE以外(Firefox, Chrome)の場合はchecked属性でラジオボタンを設定。
３．IE、かつ、cc_onが有効(IE8, IE9)の場合、fireEventでラジオボタンを設定。
４．IE、かつ、cc_onが無効(IE10, IE11)の場合、dispatchEventでラジオボタンを設定。

で、いいのかな？ fireEvent/dispatchEventでラジオボタンを設定しようとしたとき、１回のclickでは
設定できなかったのは理由不明ですが。。。

【検証に用いたコード】
１．UAを調べる
var myUA = navigator.userAgent.toLowerCase();
if(myUA.match(/msie/i) || myUA.match(/trident/i)){
  // IE
}else{
  // IE以外
}

２．checked属性でラジオボタンを設定
// "xxxx"はラジオボタンのID
document.getElementById("xxxx").checked = true; // チェックを付ける
document.getElementById("xxxx").checked = false; // チェックを外す

３．fireEventでラジオボタンを設定
// "xxxx"はラジオボタンのID
document.getElementById("xxxx").fireEvent("onclick");

４．dispatchEventでラジオボタンを設定
// "xxxx"はラジオボタンのID
// イベントオブジェクトを作成
var event = document.createEvent( "MouseEvents" );
// イベントの内容を設定
event.initEvent("click", false, true);
// イベントを発火させる
document.getElementById("xxxx").dispatchEvent(event);

【参考記事】
Javascript小僧：デジタル時計（IE11対応）
http://cheese999.blog.so-net.ne.jp/2014-01-19

Javascript小僧：デジタル時計（IE11対応コード）
http://cheese999.blog.so-net.ne.jp/2014-01-19-1

タグ：HTML JavaScript ラジオボタン navigator.userAgent cc_on checked fireEvent dispatchEvent

コメント 4

ブラウザの動作確認は、大変ですね。

by なんだかなぁ〜!! 横 濱男 (2014-02-02 11:36) 

なんだかなぁ〜!! 横 濱男さん、
趣味でやっているから、うまくいかなくてもいいのですが。。。
Webデザイナーさんの苦労がしのばれます。
(^_0)ノ

「やったぜ！」 ありがとうございます。[__猫]
by cheese999 (2014-02-02 20:46) 

そういえば、古いブラウザそのままなのでちょっと不便になって来ました。ｗ

cheese999さんのところでも恵方巻食べるよｗ

　　　　　　　 ∧＿∧
　　　　　　　（ ´∀｀）＿＿＿＿
　　　　　　　（　つ(;;;;;;;(@）
　　　　　　　 |　|　|￣￣￣￣
　　　　　　　（＿）＿）

　　＿　　　　　　　　　ﾊﾞｸﾊﾞｸﾑｼｬﾑｼｬ
┌─┴┴─┐　　　＿＿＿ ∧＿∧
|東北東｜　　(;;;;;∩（｀　　　）
└─┬┬─┘　　　￣￣ し　　　　）
　　││　　　　　　　　　｜　○ ｜　
　　││　　　　　　　　　（＿）＿）


　 ∧＿∧
　（　´∀｀）ﾏﾒﾏｰｷするよ
　（ つ[二С）
　｜ ｜ ｜
　（＿_）＿）

。
　。ﾟ
　　　＼　　　　　∧＿∧　　　　／￣￣￣￣￣￣￣￣￣￣
　　　　　((　 ∩（´∀｀　）　　＜　　鬼はｿﾄｫ～～
　　　　　　　　ゝ l工l⊂ ）　　　 ＼＿＿＿＿＿＿＿＿＿＿
　　　　　　　　　（　（　 （
　　　　　　　　　（＿（＿_）
　　　　　　　　　　　　　　　　　　　　。
　　　　　　　　　　　　　　　　　　ﾟ　。
　　　　　　　 ∧＿∧　　　　／
　　　　　　　（　´∀｀）∩　 ))　　／￣￣￣￣￣￣￣￣￣￣
　　　　　　　（ つl工l ノ　　　　＜　　福はｳﾁｨ～～
　　　　　　　　）　 ）　）　　　　　 ＼＿＿＿＿＿＿＿＿＿＿
　　　　　　　（＿_）＿）

by モッズパンツ (2014-02-03 20:41) 

モッズパンツさん、
「福は内」「鬼も内」でもいいかな～。なんてね。
(^_0)ノ
by cheese999 (2014-02-04 00:04)