2013年02月10日

javascriptによるブラウザの判別

以下をheaderに仕込みます。

<script type="text/javascript">
<!--
var userAgent = window.navigator.userAgent.toLowerCase();
var appVersion = window.navigator.appVersion.toLowerCase();
if (userAgent.indexOf("msie") > -1) {
if (appVersion.indexOf("msie 6.0") > -1){
version="ancient";
}
else if (appVersion.indexOf("msie 7.0") > -1){
version="modern";
}
else if (appVersion.indexOf("msie 8.0") > -1){
version="modern";
}
else if (appVersion.indexOf("msie 9.0") > -1){
version="modern";
}
else {
version="ancient";
}}
else if (userAgent.indexOf("firefox") > -1){
version="modern";
}
else if (userAgent.indexOf("opera") > -1){
version="modern";
}
else if (userAgent.indexOf("chrome") > -1){
version="modern";
}
else if (userAgent.indexOf("safari") > -1){
version="modern";
}
else {
version="ancient";
}
document.write('<script src="js/'+version+'.js" type="text/javascript"><\/script>');
document.write('<link rel="stylesheet" type="text/css" href="'+version+'_index.css">');
// -->
</script>

上から順番にブラウザ名を(IEはバージョンも)調べていき、
下のdocument.writeで、そのブラウザ・バージョン向けのcssとjsを記述する仕掛けです。

この設定だと、IE6以下とその他マイナーなブラウザをはじきます。
それらのブラウザーでアクセスがあった場合,ancient.cssとancient.jsが適用されたページを見ることになります。
ancientは旧式って意味です。

IE7も除外したければ、
else if (appVersion.indexOf("msie 7.0") > -1){
version="modern";
を、
version="ancient";
に書き変えます。
modernとか、ancientのネーミングはお好きなように。

IE以外のブラウザも,バージョンごとに区別するなら,
名称のあとにそのバージョンを(調べて)書きます。

結構昔に見よう見まねで書いたので、
もっと別なスマートな書き方があると思います。
IE10も載ってないですし。

さて、余計なお世話ですが、あなたがお使いのブラウザ(とOS)は

posted by 1M at 13:31| 日記