JavaScriptでOSとブラウザを判定する方法

JavaScriptでOSとブラウザを判定する方法

JavaScript

window.navigator.userAgentプロパティを使うと簡単にOSやブラウザを判定できます。

では簡単にHTMLを書いていくのですが、簡単なコードなのでJavaScriptはHTMLにscriptタグを使って書きます。

ボタンを表示するだけのHTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavascriptでOSとブラウザを判定</title>
    </head>
    <body>
        <button id="judgment">OSとブラウザを判定</button>
    </body>
</html>

ボタンを表示するだけですがJavaScriptでクリックイベントを使うのでボタンにIDを付与します。
これをブラウザでみてみます。

ボタンを表示するHTML

このように単純にボタンが表示されるだけです。

ボタンにクリックイベントを設置

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavascriptでOSとブラウザを判定</title>
    </head>
    <body>
        <button id="judgment">OSとブラウザを判定</button>
        <script>
            // ボタンのエレメント取得
            elm =   document.getElementById("judgment");

            // ボタンのイベントリスナー
            elm.addEventListener("click",function()
            {
            },false)
        </script>
    </body>
</html>

ボタンのエレメントを取得してクリックイベントを実装します。

window.navigator.userAgentプロパティ取得

window.navigator.userAgentプロパティを取得してその値をコンソールに表示します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavascriptでOSとブラウザを判定</title>
    </head>
    <body>
        <button id="judgment">OSとブラウザを判定</button>
        <script>
            // ボタンのエレメント取得
            elm =   document.getElementById("judgment");

            // ボタンのイベントリスナー
            elm.addEventListener("click",function()
            {
                // プロパティ取得
                let osandbrowser    =   window.navigator.userAgent;

                // コンソール出力
                console.log(osandbrowser);
            },false)
        </script>
    </body>
</html>

コンソールにはこのように表示されます。

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36

大文字と小文字が混在しているは後に面倒なので全てを小文字に変換します。

window.navigator.userAgentプロパティの値を小文字化

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavascriptでOSとブラウザを判定</title>
    </head>
    <body>
        <button id="judgment">OSとブラウザを判定</button>
        <script>
            // ボタンのエレメント取得
            elm =   document.getElementById("judgment");

            // ボタンのイベントリスナー
            elm.addEventListener("click",function()
            {
                // 情報取得して小文字化
                let osandbrowser    =   window.navigator.userAgent.toLowerCase();

                // コンソール出力
                console.log(osandbrowser);
            },false)
        </script>
    </body>
</html>

toLowerCase()を使って小文字に変換します。

コンソール出力を見てみます。

mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/83.0.4103.116 safari/537.36

全て小文字に変換されています。

文字列の値で判定する

OSやブラウザの判定するのにはプロパティの値に対してindexOf関数を使います。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavascriptでOSとブラウザを判定</title>
    </head>
    <body>
        <button id="judgment">OSとブラウザを判定</button>
        <script>
            // ボタンのエレメント取得
            elm =   document.getElementById("judgment");

            // ボタンのイベントリスナー
            elm.addEventListener("click",function()
            {
                // 情報取得して小文字化
                let osandbrowser    =   window.navigator.userAgent.toLowerCase();

                if  (   osandbrowser.indexOf("windows") !=  -1  )
                {
                    console.log("windowsです。");
                }
                // コンソール出力
                console.log(osandbrowser);
            },false)
        </script>
    </body>
</html>

各OSの値や各ブラウザの値は多くのページで紹介されているので検索してみて下さい。

JavaScriptでOSとブラウザを判定する方法は以上です。

コメント