Edited at

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」が入っていないことで確認可能。「chrome」という文字列は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 = (agent.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 agent = window.navigator.userAgent.toLowerCase();

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

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


最後に

SafariやOperaなど足りていないブラウザは、こちらの記事に載ってたので、参考にしてください

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