WEB制作、マーケティングに関する情報をお届けします。ホームページ制作会社、テラのブログ

JavaScriptでブラウザを特定して条件分岐させる方法。

タグ:

サムネイル画像
制作を行なっているとWindowsやFirefoxなど特定のブラウザで「動かない」や「動くけど動作が重くなる」場合があります。
そういった場合はブラウザを判定し分岐させて対応します。

ブラウザ情報の取得

window.navigator.userAgentは、ユーザエージェント(ユーザーが使用しているデバイス・ソフトウェアなど)が取得できます。

ブラウザのごとの条件分岐

下記、条件分岐です。
何をしているかというとwindow.navigator.userAgentで取得、indexOfメソッドで「取得した文字列のなかにもし、ブラウザ名の〇〇〇が含まれていたら」という分岐を行なっています。
toLowerCase()は取得した文字列の大文字を小文字に変換しています。
また、処理の順番は崩さないようにしましょう。
なぜかというと、下記をご覧ください。
こちらは、edgeでアクセスしたユーザーのユーザーエージェントです。
safariもChromeも含まれておりもし、Chromeを先に書いた場合はedgeもChromeと見なされてしまいます。
そのほかのユーザーエージェントも同様に共通のブラウザ名が含まれているため処理の順番が重要になります。