ブラウザを取得する
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のタブレットをお使いですね');
}
}