navigatorプロパティ一覧 判定処理の使用例あり | 【JavaScript】【navigator】

navigator

　navigatorオブジェクトは、ブラウザの情報やデバイスの情報を取得することができます。

・ブラウザ情報

　ブラウザの正式名称、クッキー、バージョンなどの情報取得が可能

・デバイス情報

　デバイスのネットワークやユーザ情報の取得が可能

プロパティ一覧(2019/6/20時点の標準のみ)

プロパティ名	内容
navigator.appName※	ブラウザの正式名称
navigator.appVersion※	ブラウザのバージョンを表す文字列
navigator.connection	デバイスのネットワーク接続に関する情報
navigator.cookieEnabled	ブラウザのクッキーが有効かどうかの真偽値
navigator.language	ブラウザの言語バージョンを表す文字列
navigator.mimeTypes	ブラウザがサポートしているMIMEタイプの一覧
navigator.webkitNotification	notificationWebアプリケーションからユーザーに通知を配信するために使用できるオブジェクト
navigator.onLine	ブラウザがオンラインで動作しているかどうかの真偽値
navigator.oscpu	現在のオペレーティングシステムを表す文字列
navigator.platform	ブラウザのプラットフォームを表す文字列
navigator.plugins	ブラウザにインストールされているプラグインの一覧
navigator.userAgent	現在のブラウザのユーザエージェントを表す文字列

※正確な値を返すとは限らないプロパティ

実際の値

現在利用しているブラウザとデバイス情報

　ブラウザ情報

　デバイス情報

使用例

navigator.userAgent

　navigator.userAgentでは、デバイスの情報を取得できるため、PC用の処理やスマホ用の処理といったように、デバイス別の処理を実現することができます。

var ua=navigator.userAgent
if (ua.match(/iphone|ipod|android.*mobile/i)) {
    //スマホの場合の処理を記述
}
else if (ua.match(/ipad|android/i)) {
    //タブレットの場合の処理を記述
}
else {
    // PCの場合の処理を記述
}

navigator.onLine

　navigator.onLineでは、インターネット接続の確認ができます。

navigator_onLine_alert()
function navigator_onLine_alert(){
    var noae=document.getElementById("navigator_onLine_alert_element")
    if(!navigator.onLine && noae==null){
        var div=document.createElement("div")
        div.id="navigator_onLine_alert_element"
        var s=document.createElement("span")
        s.innerText="インターネット接続無し"
        div.append(s)
        $(div).css({
            "position":"fixed",
            "top":"0px";
            "text-align":"center",
            "width":"100%",
            "margin":" 3% 0 0 0",
            "z-index":"1000"
        })
        $(s).css({
            "box-shadow": "0 0 5px 0px grey",
            "padding": "2% 8%",
            "background-color": "#ff9b9b85",
        })
        document.body.append(div)
    }else if(navigator.onLine && noae!=null){
        noae.remove()
    }
    setTimeout(navigator_onLine_alert,500)
}

それでは、良いプログラミングライフを。