JavaScriptでブラウザを特定して条件分岐させる方法。
2018.04.25
カテゴリ：WEB制作
タグ：
制作を行なっているとWindowsやFirefoxなど特定のブラウザで「動かない」や「動くけど動作が重くなる」場合があります。
そういった場合はブラウザを判定し分岐させて対応します。
そういった場合はブラウザを判定し分岐させて対応します。
ブラウザ情報の取得
|
1 |
var userAgent = window.navigator.userAgent; |
window.navigator.userAgentは、ユーザエージェント(ユーザーが使用しているデバイス・ソフトウェアなど)が取得できます。
ブラウザのごとの条件分岐
下記、条件分岐です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
var userAgent = window.navigator.userAgent.toLowerCase(); if(userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1 ||) { //Internet Explorerへの処理 } else if(userAgent.indexOf('edge') != -1) { //edgeへの処理 } else if(userAgent.indexOf('chrome') != -1) { //Googleクロームへの処理 } else if(userAgent.indexOf('safari') != -1) { //safariへの処理 } else if(userAgent.indexOf('firefox') != -1) { //firefoxへの処理 } else if(userAgent.indexOf('opera') != -1) { //Operaへの処理 } else { //上記以外のブラウザへの処理 } |
何をしているかというとwindow.navigator.userAgentで取得、indexOfメソッドで「取得した文字列のなかにもし、ブラウザ名の〇〇〇が含まれていたら」という分岐を行なっています。
toLowerCase()は取得した文字列の大文字を小文字に変換しています。
また、処理の順番は崩さないようにしましょう。
なぜかというと、下記をご覧ください。
toLowerCase()は取得した文字列の大文字を小文字に変換しています。
また、処理の順番は崩さないようにしましょう。
なぜかというと、下記をご覧ください。
|
1 |
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.<OS build number> |
こちらは、edgeでアクセスしたユーザーのユーザーエージェントです。
safariもChromeも含まれておりもし、Chromeを先に書いた場合はedgeもChromeと見なされてしまいます。
そのほかのユーザーエージェントも同様に共通のブラウザ名が含まれているため処理の順番が重要になります。
safariもChromeも含まれておりもし、Chromeを先に書いた場合はedgeもChromeと見なされてしまいます。
そのほかのユーザーエージェントも同様に共通のブラウザ名が含まれているため処理の順番が重要になります。
