IT the Best

HTML/CSS/JSに関する情報やはてなブログのカスタマイズに関する情報を掲載しています。

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

f:id:Surprisedblog:20190608171727p:plain

 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では、デバイスの情報を取得できるため、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_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)
}

 

 

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