JavaScriptでブラウザ判定を行う

JavaScriptでブラウザ判定を行う:

既に、関連書籍や各種サイト/記事で多く紹介されている内容ですが、自分の備忘録を目的に投稿します

ブラウザ毎に判定してみる

Chrome

ユーザーエージェントの確認

var agent = window.navigator.userAgent; 
console.log(agent); 
// 実行結果 
// VM126:1 Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36 

判定方法

var agent = window.navigator.userAgent.toLowerCase(); 
var chrome = (agent.indexOf('chrome') !== -1) && (agent.indexOf('edge') === -1)  && (agent.indexOf('opr') === -1); 
console.log(chrome);  
// 実行結果：true 

ユーザーエージェントに「chrome」という文字列が入っていて、かつ、「edge/opr」が入っていないことで確認可能。「chome」という文字列はEdgeやOperaのユーザーエージェントにも含まれているため、これらを除去が必要。

Edge

ユーザーエージェントの確認

var agent = window.navigator.userAgent; 
console.log(agent); 
// 実行結果 
// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134 

判定方法

var agent = window.navigator.userAgent.toLowerCase(); 
var edge = (agent.indexOf('edge') !== -1);   
console.log(edge);  
// 実行結果：true 

ユーザーエージェントに「edge」という文字列が入っている

IE9

ユーザーエージェントの確認

var agent = window.navigator.userAgent; 
console.log(agent); 
// 実行結果 
// Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; 

判定方法

var agent = window.navigator.userAgent.toLowerCase(); 
var ie9 = msie && (version.indexOf('msie 9.') !== -1); 
console.log(ie9);  
// 実行結果：true 

ユーザーエージェントに「msie 9」という文字列が入っている

IE11

ユーザーエージェントの確認

var agent = window.navigator.userAgent; 
console.log(agent); 
// 実行結果 
// Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; Touch; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; Tablet PC 2.0; rv:11.0) like Gecko; 

判定方法

var agent = window.navigator.userAgent.toLowerCase(); 
var ie11 = (agent.indexOf('trident/7') !== -1); 
console.log(ie11);  
// 実行結果：true 

ユーザーエージェントに「trident/7」という文字列が入っている
IE11から「msie」という文字列が削除されているため注意が必要

FireFox

ユーザーエージェントの確認

var agent = window.navigator.userAgent; 
console.log(agent); 
// 実行結果 
// Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0 

判定方法

var firefox = (agent.indexOf('firefox') !== -1); 
console.log(firefox); 
// 実行結果：true 

ユーザーエージェントに「firefox」という文字列が入っている

最後に

SafariやOperaなど足りていないブラウザがあります

こちら記事に載ってたので、参考にしてください

・使用してるブラウザを判定したい