[up]
[prev]
[参照　tohohoの控えnavigatorページ]
[next]

ブラウザを判定するscript_re77 
<script type="text/javascript">
var userAgent = window.navigator.userAgent.toLowerCase(); //toLowerCase() メソッドは呼び出す文字列の値を小文字に変換して返す
  
if(userAgent.indexOf('msie') != -1){ //ブラウザ識別名は小文字 toLowerCase()が値を小文字に変換しているため 例 msie
document.write('お使いのブラウザはInternet Explorerですね！');
}else if(userAgent.indexOf('trident') != -1){ //IEは識別名はバージョンによって msie と　trident があるため
document.write('お使いのブラウザはInternet Explorerですね！');
}else if(userAgent.indexOf('edge') != -1){ //注意：識別順序　chrome,safariより前　※識別名にchrome,safariを含むため
document.write('お使いのブラウザはedgeですね！');
}else if(userAgent.indexOf('chrome') != -1){//識別順序　safariより前　※識別名にsafariを含むため
document.write('お使いのブラウザはchromeですね！');
}else if(userAgent.indexOf('safari') != -1){//識別順序　edge,chromeiより後
document.write('お使いのブラウザはsafariですね！');
}else if(userAgent.indexOf('firefox') != -1){
document.write('お使いのブラウザはfirefoxですね！');
}else if(userAgent.indexOf('opera') != -1){
document.write('お使いのブラウザはoperaですね！');
}
document.write(userAgent);
</script>
使用してるブラウザを判定する

ブラウザを取得する


var userAgent = window.navigator.userAgent;

// 例えばChromeを使ってると
// userAgent: Mozilla/5.0 (windows nt 6.3; wow64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

window.navigatorでnavigatorオブジェクトが取れます。
このnavigatorオブジェクトはクッキーが有効かどうかや言語などブラウザに関する情報をいろいろ持っています。

リファレンスはこちら
Navigator Web API インターフェース | MDN

navigator.userAgentでブラウザのユーザーエージェントの文字列が返ってくるのですが、やけに長ったらしいので、ここに「Chrome」などの特定の文字列が含まれているかどうかで、どのブラウザを使用しているかを判定します。

ブラウザの識別子

基本的には以下の文字列で各ブラウザを識別できます。

ブラウザ 識別子
Internet Explorer MSIE または Trident
Edge Edge
Google Chrome Chrome
FireFox Firefox
Safari Safari
Opera Opera

基本的と言ったのは、これらの値はバージョンアップなどで予期せず変更される可能性があるからです。
IEを見てもらえばわかる通り、識別子が2種類あります。
これは、IE11になって、ユーザーエージェントの文字列から「MSIE」が削除され「Trident」が追加されたためです。

ブラウザの判定

判定をするにあたって、文字列をすべて小文字にしておきます。

var userAgent = window.navigator.userAgent.toLowerCase();

indexOfを使って判定します。

if(userAgent.indexOf('msie') != -1) {
  console.log('お使いのブラウザはInternet Explorerですね！');
}

"基本的には"これでOKです。
注意すべきはその順番です。

最初にChromeを使っていた場合の例を出しましたが、そのユーザーエージェントの文字列をもう一度よく見てみてください。

Mozilla/5.0 (windows nt 6.3; wow64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

「Safari」って入ってますね。先ほど一覧化したように「Safari」はもちろんSafariブラウザの識別子になります。しかしここでの期待値はChromeです。判定の順序を適当に書いてしまうと、本当はChromeを使っているのにSafariを使用していると誤判定する恐れがあります。

Edgeに至ってはChromeもSafariも含んでいます。はぁ？という感じです。

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10162

正しい判定順

SafariよりChromeが先、
ChromeよりEdgeが先です。

var userAgent = window.navigator.userAgent.toLowerCase();

if(userAgent.indexOf('msie') != -1 ||
        userAgent.indexOf('trident') != -1) {
    console.log('Internet Explorerをお使いですね');
} else if(userAgent.indexOf('edge') != -1) {
    console.log('Edgeをお使いですね');
} else if(userAgent.indexOf('chrome') != -1) {
    console.log('Google Chromeをお使いですね');
} else if(userAgent.indexOf('safari') != -1) {
    console.log('Safariをお使いですね');
} else if(userAgent.indexOf('firefox') != -1) {
    console.log('FireFoxをお使いですね');
} else if(userAgent.indexOf('opera') != -1) {
    console.log('Operaをお使いですね');
} else {
    console.log('そんなブラウザは知らん');
}

IEのバージョンは

バージョンもnavigatorオブジェクトから取得できます。

var version = window.navigator.appVersion.toLowerCase();

6~10まではこう。

if (version.indexOf("msie 6.") != -1) {
    console.log('IE6なんですねﾌﾟｰｸｽｸｽ');
}

11は先述した通り識別子がTridentなのでそこで判別します。
6より前は考慮しないことにします。

おまけ

モバイルはこうすれば良いらしい

var userAgent = window.navigator.userAgent.toLowerCase();

if(userAgent.indexOf('iphone') != -1) {
    console.log('iPhoneをお使いですね');
} else if(userAgent.indexOf('ipad') != -1) {
    console.log('iPadをお使いですね');
} else if(userAgent.indexOf('android') != -1) {
    if(userAgent.indexOf('mobile') != -1) {
        console.log('androidのスマホをお使いですね');
    } else {
        console.log('androidのタブレットをお使いですね');
    }
}

▼参考
JavaScriptでUserAgentを使った判別をする