 ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] ブラウザ判別
|
・サイトマップ [Shift-S] |
 |
■ ブラウザ判別：KL_IE/NS/OP/MZ
ブラウザ判別を行うスクリプトです。
KL_IDENTIFY_DONE=0;
function kl_identify(){
//複数回呼ばれた場合に同じコードを再実行しないよう対策
if(KL_IDENTIFY_DONE) return;
KL_IDENTIFY_DONE=1;
//ブラウザを大まかに IE,NS4,NS6,Opera系に分類します
while(1){
if(window.opera){
if(document.getElementById){ KL_OP6=1; break; }
}
else if(document.all){ KL_IE4=1; break; }
else if(kl_isns4_raw()){ KL_NS4=1; break; }
else if(document.addEventListener){ KL_NS6=1; break; }
KL_AVAIL=0; return;
}
//KeyNaviを利用可能なブラウザ(IE4+,NS4+,Opera6+,NS6+,Mozilla)では真に
KL_AVAIL=1;
var ua=navigator.userAgent;
//他の場所でUserAgentを参照する時に「navigator.userAgent」と書くと冗長なのでこれを利用
KL_UAGENT=ua;
//UserAgent値やdocument属性からバージョン情報を取得
//kl_getnum(s,h,defval)は文字列「h:数字」を含む文字列から数字部分を取得
//例：「MSIE6」「MSIE 6」「MSIE/6」「MSIE:6」の何れからも「6」を取得可
KL_IE5 =(KL_IE4 && document.getElementById); //IE5+
KL_IE55=(KL_IE5 && kl_getnum(ua,"MSIE",0)>=5.5); //IE5.5+
KL_IE6 =(KL_IE5 && kl_getnum(ua,"MSIE",0)>=6); //IE6+
KL_OP7 =(KL_OP6 && document.addEventListener); //Opera7+
//Netscape4.x、Mozilla系ブラウザでは細かいバージョン情報も取得しておく
if(KL_NS4){
KL_NSV=parseFloat(navigator.appVersion);
}
if(KL_NS6){
KL_MZV=kl_getnum(ua,"rv:",0);
KL_MZT=(!kl_match(ua,"Netscape") && KL_MZV>=1.2);
}
//UserAgent値からOS情報を取得
var win=kl_match(ua,"Windows");
var mac=kl_match(ua,"Mac");
var x11=kl_match(ua,"x11");
var sfr=kl_match(ua,"Safari");
//各ブラウザのOS情報を反映 (ユーザ数が多いWindows版を優先)
KL_IE4M=(KL_IE4 && !win && mac);
KL_IE4W=(KL_IE4 && !KL_IE4M);
KL_IE5W=(KL_IE5 && !KL_IE4M);
KL_NS4M=(KL_NS4 && !win && mac);
KL_NS4L=(KL_NS4 && !win && x11);
KL_NS4W=(KL_NS4 && !KL_NS4M && !KL_NS4L);
KL_NS6M=(KL_NS6 && !win && mac && !sfr);
KL_NS6S=(KL_NS6 && !win && !x11 && sfr);
KL_NS6L=(KL_NS6 && !win && x11);
KL_NS6W=(KL_NS6 && !KL_NS6M && !KL_NS6L && !KL_NS6S);
}
//Netscape4.xを判定 (「document.layers」とすると問題があるため別に判定関数を用意)
function kl_isns4_raw(){
if(!navigator.appName || !navigator.appVersion) return 0;
return (navigator.appName=="Netscape" &&
navigator.appVersion.indexOf("4.")==0)
}
<script language="javascript" src="http://www.keynavi.net/files/keynavi_ja.js"></script>
<script language="javascript"><!--
if(KL_IE4 && !KL_IE5) alert("IE4ですね。");
if(KL_IE5 && !KL_IE55) alert("IE5ですね。");
if(KL_IE55 && !KL_IE6) alert("IE5.5ですね。");
if(KL_IE6) alert("IE6以上ですね。");
if(KL_NS4 || KL_NS6) alert("Netscapeですね。");
if(KL_OP6) alert("Operaですね。");
//-->
</script>
【ブラウザ判別「kl_identify()」＜keynavi_ja.js】
KL_IDENTIFY_DONE=0;
function kl_identify(){
//複数回呼ばれた場合に同じコードを再実行しないよう対策
if(KL_IDENTIFY_DONE) return;
KL_IDENTIFY_DONE=1;
//ブラウザを大まかに IE,NS4,NS6,Opera系に分類します
while(1){
if(window.opera){
if(document.getElementById){ KL_OP6=1; break; }
}
else if(document.all){ KL_IE4=1; break; }
else if(kl_isns4_raw()){ KL_NS4=1; break; }
else if(document.addEventListener){ KL_NS6=1; break; }
KL_AVAIL=0; return;
}
//KeyNaviを利用可能なブラウザ(IE4+,NS4+,Opera6+,NS6+,Mozilla)では真に
KL_AVAIL=1;
var ua=navigator.userAgent;
//他の場所でUserAgentを参照する時に「navigator.userAgent」と書くと冗長なのでこれを利用
KL_UAGENT=ua;
//UserAgent値やdocument属性からバージョン情報を取得
//kl_getnum(s,h,defval)は文字列「h:数字」を含む文字列から数字部分を取得
//例：「MSIE6」「MSIE 6」「MSIE/6」「MSIE:6」の何れからも「6」を取得可
KL_IE5 =(KL_IE4 && document.getElementById); //IE5+
KL_IE55=(KL_IE5 && kl_getnum(ua,"MSIE",0)>=5.5); //IE5.5+
KL_IE6 =(KL_IE5 && kl_getnum(ua,"MSIE",0)>=6); //IE6+
KL_OP7 =(KL_OP6 && document.addEventListener); //Opera7+
//Netscape4.x、Mozilla系ブラウザでは細かいバージョン情報も取得しておく
if(KL_NS4){
KL_NSV=parseFloat(navigator.appVersion);
}
if(KL_NS6){
KL_MZV=kl_getnum(ua,"rv:",0);
KL_MZT=(!kl_match(ua,"Netscape") && KL_MZV>=1.2);
}
//UserAgent値からOS情報を取得
var win=kl_match(ua,"Windows");
var mac=kl_match(ua,"Mac");
var x11=kl_match(ua,"x11");
var sfr=kl_match(ua,"Safari");
//各ブラウザのOS情報を反映 (ユーザ数が多いWindows版を優先)
KL_IE4M=(KL_IE4 && !win && mac);
KL_IE4W=(KL_IE4 && !KL_IE4M);
KL_IE5W=(KL_IE5 && !KL_IE4M);
KL_NS4M=(KL_NS4 && !win && mac);
KL_NS4L=(KL_NS4 && !win && x11);
KL_NS4W=(KL_NS4 && !KL_NS4M && !KL_NS4L);
KL_NS6M=(KL_NS6 && !win && mac && !sfr);
KL_NS6S=(KL_NS6 && !win && !x11 && sfr);
KL_NS6L=(KL_NS6 && !win && x11);
KL_NS6W=(KL_NS6 && !KL_NS6M && !KL_NS6L && !KL_NS6S);
}
//Netscape4.xを判定 (「document.layers」とすると問題があるため別に判定関数を用意)
function kl_isns4_raw(){
if(!navigator.appName || !navigator.appVersion) return 0;
return (navigator.appName=="Netscape" &&
navigator.appVersion.indexOf("4.")==0)
}
上記「kl_identify()」の実行により各種定数が設定されます。 「kl_identify()」は外部スクリプト指定 「<script language="javascript" src="http://www.keynavi.net/files/keynavi_ja.js"></script>」 内で実行されるため、この記述の後なら各定数を参照できます。
Note：
Netscape4.xでは 「フレーム利用＆外部スクリプト」の場合に
「document.xxx」を参照するとJavaスクリプトの実行が止まるバグがあるので
ブラウザ判定には「document.layers」を使いません。
参考：フレーム利用時に外部スクリプト実行中断(JavaScriptバグ＆回避法リスト)
参考：フレーム利用時に外部スクリプト実行中断(JavaScriptバグ＆回避法リスト)
【各ブラウザ判別定数１：よく使うもの】
| KL_IE4 | IE4以上 |
| KL_NS4 | Netscape4.x |
| KL_NS6 | Netscape6以上/Mozilla/Safari |
| KL_OP6 | Opera6以上 |
上記定数を用いることによりブラウザ分岐処理を簡単に記述できます。
補足：
JavaScriptやスタイルシートの仕様、動作は大別して
IE系、Netscape4.x系、Netscape6+＆Mozilla系、Opera系
に分かれます。
IE4-6.0では共通して「document.all」、
Netscape4.xでは「document.layers」、
Netscape6-7等Mozilla系では「document.addEventListener」が使えるなど
互いに似通った特徴をもっています。
【各ブラウザ判別定数２：細かい動作を区別する場合に利用】
| KL_IE5 | IE5以上 |
| KL_IE55 | IE5.5以上 |
| KL_IE6 | IE6以上 |
| KL_IE4W | WinIE4以上 |
| KL_IE4M | MacIE4以上 |
| KL_NS6W | WinNS6以上 |
| KL_NS6L | LinuxNS6以上(その他Unix=x11系含む) |
| KL_NS6M | MacNS6以上 |
| KL_NS6S | Safari |
| KL_OP7 | Opera7以上 |
| KL_MZV | Mozillaのバージョン (「rv:」に続く文字列から算出、NS6+で利用) |
| KL_NSV | Netscape4.xのバージョン |
| KL_UAGENT | navigator.userAgentと同義 |
ブラウザの発展的な機能を使う場合、 微妙に動作が異なることがあるため上記の定数を利用します。
例えば
Netscape6+,Mozilla系ブラウザではUser-Agent文字列内の
「rv:」に続くバージョン数に動作が依存するので
こちらで処理を分岐します。
【ブラウザ判定サンプルHTML：Copy＆Paste】
<script language="javascript" src="http://www.keynavi.net/files/keynavi_ja.js"></script>
<script language="javascript"><!--
if(KL_IE4 && !KL_IE5) alert("IE4ですね。");
if(KL_IE5 && !KL_IE55) alert("IE5ですね。");
if(KL_IE55 && !KL_IE6) alert("IE5.5ですね。");
if(KL_IE6) alert("IE6以上ですね。");
if(KL_NS4 || KL_NS6) alert("Netscapeですね。");
if(KL_OP6) alert("Operaですね。");
//-->
</script>
アクセスしたブラウザの種類を判定し 結果を「alert()」で表示しています。
【参考：UserAgent値の例】
| IE | Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) |
| Mozilla/4.0 (compatible; MSIE 5.0; Mac_PowerPC) | |
| Mozilla/4.0 (compatible; MSIE 4.01; Windows 98) | |
| Netscape4.x | Mozilla/4.7 [ja] (Win98; U) |
| Mozilla/4.61 [ja] (X11; I; Linux 2.2 i686) | |
| Netscape6+ | Mozilla/5.0 (Windows; U; Win98; ja-JP; rv:0.9.4) Gecko/20011019 Netscape6/6.2 |
| Mozilla/5.0 (Windows; U; Windows NT 5.0; ja-JP; rv:1.0.2) Gecko/20021120 Netscape/7.01 | |
| Mozilla | Mozilla/5.0 (X11; U; Linux i686; ja-JP; rv:0.9.6) Gecko/20011120 |
| Opera | Mozilla/4.0 (compatible; MSIE 5.0; Windows XP) Opera 6.03 [ja] |
| Mozilla/4.0 (compatible; MSIE 5.0; Linux 2.4.7-10 i686) Opera 6.1 [en] | |
| Safari | Mozilla/5.0 (Macintosh; U; PPC Mac OS X; ja-jp) AppleWebKit/85 (KHTML, like Gecko) Safari/85 |
|
【JavaScript@Keynavi.Net ：
基本編
】
「Ctrl-矢印」でフォーカスを上下左右に移動できます。
|
| トップへ戻る [1] | Back[Q] ・Top[W] ・Up[E] ・PgUp[R] ・Focus[Ctrl-矢印] |
|
|
ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] ブラウザ判別
|
・サイトマップ [Shift-S] |