javascript ブラウザを判定する
- 2020.09.28
- javascript
- javascript

javascriptで、window.navigator.userAgentを使って、現在使用しているブラウザを判定するサンプルコードを記述してます。
環境
- OS windows10 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 84.0.4147.105
window.navigator.userAgent使い方
window.navigator.userAgentを使うと、ブラウザに関する情報を取得することが可能です。
1 |
window.navigator.userAgent |
encodeURI使い方
1 2 3 |
console.log(window.navigator.userAgent); // Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36 |
ブラウザ判定
window.navigator.userAgentで取得した情報の中に、対象の文字列が含まれているかで判定します。
1 2 3 |
if (userAgent.indexOf("chrome") !== -1 || userAgent.indexOf("crios") !== -1) { //chrome console.log('chrome'); } |
サンプルコード
以下は、
「 判定 」ボタンをクリックすると使用しているブラウザを表示する
サンプルコードとなります。
edgeを判定する場合、「chrome」も含まれているので、条件式の順番が大事になります。
※cssには「bootstrap material」を使用してます。
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>mebeeサンプル</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"> <link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous"> </head> <style> .main { margin: 0 auto; margin-top: 200px; display: flex; flex-direction: column; align-items: center; font-size: 25px; } </style> <script> function hoge() { // 全て小文字に変換 var userAgent = window.navigator.userAgent.toLowerCase(); // userAgentを表示 document.getElementsByClassName('badge-secondary')[0].textContent = userAgent; var obj = document.getElementsByClassName('badge-primary')[0]; if (userAgent.indexOf("edg") !== -1 || userAgent.indexOf("edge") !== -1 || userAgent.indexOf("edga") !== -1 || userAgent.indexOf("edgios") !== -1) { //edge obj.textContent = 'edge'; } else if (userAgent.indexOf("opera") !== -1 || userAgent.indexOf("opr") !== -1) { //opera obj.textContent = 'opera'; } else if (userAgent.indexOf("chrome") !== -1 || userAgent.indexOf("crios") !== -1) { //chrome obj.textContent = 'chrome'; } else if (userAgent.indexOf("firefox") !== -1 || userAgent.indexOf("fxios") !== -1) { //firefox obj.textContent = 'firefox'; } else if (userAgent.indexOf("safari") !== -1) { //safari obj.textContent = 'safari'; } else if (userAgent.indexOf("msie") !== -1 || userAgent.indexOf("trident") !== -1) { //ie obj.textContent = 'ie'; } } </script> <body> <div class="main"> <h2><span class="badge badge-primary">判定結果</span></h2> <h2><span class="badge badge-secondary">userAgent</span></h2> <button type="button" class="btn btn-raised btn-warning" onclick="hoge()">判定</button> </div> </body> </html> |
表示されていることが確認できます。
chromeの場合

firefoxの場合

edge(Chromiumベース)の場合

ie11の場合

safariの場合

-
前の記事
Rails Controllerを作成してアクションを実行するまでの手順 2020.09.27
-
次の記事
javascript MutationObserverを使ってDOMの監視を行う 2020.09.28
コメントを書く