Navigator オブジェクト、Screen オブジェクト。

window.navigator プロパティは、ブラウザとシステム情報を含む Navigator オブジェクトを指します。スクリプトはこの属性を使用して、ユーザーの環境情報を学習します。

Navigator オブジェクトのプロパティ

Navigator.userAgent

navigator.userAgent プロパティは、ブラウザのメーカー、バージョン、オペレーティングシステム、その他の情報を含むユーザーデバイス情報を表すブラウザのユーザーエージェント文字列を返します。

以下は Chrome ブラウザの userAgent です。

ナビゲーター.ユーザーエージェント
// "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML、Gecko など) Chrome/29.0.1547.57 Safari/537.36"

「userAgent」属性を通じてブラウザを識別するのは良い考えではありません。すべての状況 (さまざまなブラウザ、さまざまなバージョン) を考慮する必要があり、ユーザーはこの文字列を変更できるため、これは非常に面倒です。この文字列の形式には統一された規定がなく、将来の適用性も保証されていないため、さまざまなインターネットアクセスデバイスが無限に登場し、すべてを網羅することは困難です。そのため、現在ではブラウザを識別する方法は一般的には行われず、現在のブラウザが使用するJavaScriptの機能をサポートしているかどうかを1つずつテストする「機能識別」という方法が使われています。

ただし、モバイルブラウザは、「userAgent」を使用して「mobi」文字列が含まれているかどうかをテストすることで、大まかかつ正確に識別できます。

var ua = navigator.userAgent.toLowerCase();

if (/mobi/.test(ua)) {
  //モバイルブラウザ
} それ以外 {
  // モバイル以外のブラウザ
}

すべてのモバイルデバイスブラウザを識別したい場合は、さらに多くの署名文字列をテストできます。

/mobi|android|touch|mini/.test(ua)

Navigator.plugins

Navigator.plugins プロパティは、Flash、ActiveX など、ブラウザによってインストールされたプラグインを表す Plugin インスタンスオブジェクトをメンバーとする配列のようなオブジェクトを返します。

var pluginsLength = navigator.plugins.length;

for (var i = 0; i < pluginsLength; i++) {
  console.log(navigator.plugins[i].name);
  console.log(navigator.plugins[i].ファイル名);
  console.log(navigator.plugins[i].description);
  console.log(navigator.plugins[i].version);
}

ナビゲーター.プラットフォーム

「Navigator.platform」プロパティは、「MacIntel」、「Win32」、「Linux x86_64」などのユーザーのオペレーティングシステム情報を返します。

ナビゲーター.プラットフォーム
// 「Linux x86_64」

Navigator.onLine

navigator.onLine プロパティは、ユーザーが現在オンラインかオフライン (ブラウザが切断されている) かを示すブール値を返します。

navigator.onLine // true

場合によっては、ブラウザは LAN に接続できても、LAN が外部ネットワークに接続できないことがあります。このとき、一部のブラウザのonLine属性はtrueを返すため、trueであれば必ずインターネットにアクセスできるとは限りません。ただし、「false」の場合、ユーザーはオフラインであると結論付けることができます。

ユーザーがオンラインになると「online」イベントがトリガーされ、ユーザーがオフラインになると「offline」イベントがトリガーされます。これら 2 つのイベントのコールバック関数は、「window.ononline」と「window.onoffline」を通じて指定できます。 `。

window.addEventListener('オフライン', function(e) { console.log('オフライン'); });
window.addEventListener('online', function(e) { console.log('online'); });

ナビゲーター.言語、ナビゲーター.言語

Navigator. language プロパティは、ブラウザの優先言語を表す文字列を返します。このプロパティは読み取り専用です。

navigator. language // "en"

Navigator.langages プロパティは、ユーザーが受け入れ可能な言語を表す配列を返します。 Navigator. language は常にこの配列の最初のメンバーになります。 HTTP リクエストヘッダー情報の Accept-Language フィールドは、この配列から取得されます。

navigator.langages // ["en-US", "en", "zh-CN", "zh", "zh-TW"]

このプロパティが変更されると、「window」オブジェクトで「 languagechange 」イベントがトリガーされます。

Navigator.geolocation

Navigator.geolocation プロパティは、ユーザーの地理的位置に関する情報を含む Geolocation オブジェクトを返します。この API は HTTPS プロトコルでのみ使用できることに注意してください。それ以外の場合は、次のメソッドを呼び出すときにエラーが報告されます。

Geolocation オブジェクトは、次の 3 つのメソッドを提供します。

Geolocation.getCurrentPosition(): ユーザーの現在位置を取得します。
Geolocation.watchPosition(): ユーザーの位置の変化を監視します
Geolocation.clearWatch(): watchPosition() メソッドで指定されたリスニング機能をキャンセルします

これら 3 つのメソッドを呼び出すと、ブラウザはユーザーに承認を求めるダイアログボックスをポップアップ表示することに注意してください。

Navigator.cookieEnabled

navigator.cookieEnabled プロパティは、ブラウザの Cookie 機能がオンになっているかどうかを示すブール値を返します。

navigator.cookieEnabled // true

この属性はブラウザの一般的な特性を反映しており、特定の Web サイトの Cookie が保存されるかどうかとは関係がないことに注意してください。ユーザーは Web サイトが Cookie を保存しないように設定できます。その場合、cookieEnabled は true を返します。

Navigator オブジェクトのメソッド

Navigator.javaEnabled()

navigator.javaEnabled() メソッドは、ブラウザが Java アプレットアプレットを実行できるかどうかを示すブール値を返します。

navigator.javaEnabled() // false

Navigator.sendBeacon()

Navigator.sendBeacon() メソッドは、データをサーバーに非同期的に送信するために使用されます。詳細については、「XMLHttpRequest オブジェクト」の章を参照してください。

Navigator の実験的なプロパティ

Navigator オブジェクトには、一部のブラウザで利用できる実験的なプロパティがいくつかあります。

Navigator.deviceMemory

navigator.deviceMemory プロパティは、現在のコンピューターのメモリ量 (GB 単位) を返します。このプロパティは読み取り専用で、HTTPS 環境でのみ使用できます。

戻り値は近似値であり、最も近い 2 のべき乗に丸められます。通常は 0.25、0.5、1、2、4、8 です。実メモリが 8GB を超える場合も '8' が返されます。

if (navigator.deviceMemory > 1) {
  await import('./costly-module.js');
}

上の例では、現在のメモリが 1GB を超えている場合にのみ、大きなスクリプトがロードされます。

Navigator.hardwareConcurrency

navigator.hardwareConcurrency プロパティは、ユーザーのコンピュータで使用できる論理プロセッサの数を返します。このプロパティは読み取り専用です。

最新のコンピューター CPU には複数の物理コアがあり、それぞれの物理コアが同時に複数のスレッドの実行をサポートする場合があります。したがって、クアッドコア CPU は 8 つの論理プロセッサコアを提供できます。

if (navigator.hardwareConcurrency > 4) {
  await import('./costly-module.js');
}

上記の例では、使用可能な論理プロセッサが 4 つを超える場合にのみ、大きなスクリプトがロードされます。

このプロパティは、使用可能な論理プロセッサごとに 1 つずつ、Web ワーカーを作成するために使用されます。

ワーカーリスト = []; にします。

for (let i = 0; i < window.navigator.hardwareConcurrency; i++) {
  newWorker = { にします
    ワーカー: 新しいワーカー('cpuworker.js')、
    使用中: false
  };
  ワーカーリスト.push(newWorker);
}

上記の例では、使用可能な論理プロセッサと同じ数の Web ワーカーが作成されます。

ナビゲーター.接続

navigator.connection プロパティは、現在のネットワーク接続に関する情報を含むオブジェクトを返します。

ダウンリンク: 実効帯域幅の推定値 (メガビット/秒 (Mbps) 単位)。25KB/秒の最も近い倍数に四捨五入されます。
downlinkMax: 現在の接続の最大ダウンリンク速度 (単位: メガビット/秒、Mbps)。
activeType: 接続の同等のタイプを返します。可能な値は slow-2g、2g、3g、4g です。
rtt: 現在の接続の推定有効往復時間。25 ミリ秒の最も近い倍数に四捨五入されます。
saveData: ユーザーがブラウザのデータ使用量削減オプション (画像をロードしないなど) を設定しているかどうかにかかわらず、「true」または「false」を返します。
type: 現在の接続のメディアタイプ。指定可能な値は、「bluetooth」、「セルラー」、「イーサネット」、「なし」、「wifi」、「wimax」、「other」、「unknown」です。

if (navigator.connection.EffectiveType === '4g') {
  await import('./costly-module.js');
}

上記の例では、ネットワーク接続が 4G の場合、大きなスクリプトが読み込まれます。

画面オブジェクト

Screen オブジェクトは、現在のウィンドウが配置されている画面を表し、表示デバイスに関する情報を提供します。 window.screen プロパティはこのオブジェクトを指します。

このオブジェクトには次のプロパティがあります。

Screen.height: ブラウザウィンドウが配置されている画面の高さ (単位ピクセル)。この値は定数とみなすことができ、モニターの解像度が調整されない限り変化しません。モニターの解像度はブラウザーの設定とは関係ありません。Web ページを拡大縮小しても解像度は変わりません。
Screen.width: ブラウザウィンドウが配置されている画面の幅 (ピクセル単位)。
Screen.availHeight: ブラウザウィンドウの利用可能な画面の高さ (ピクセル単位)。システムタスクバーや Mac システム画面の下部にある Dock 領域など、一部のスペースが利用できない場合があるため、このプロパティは、「高さ」からそれらのシステムコンポーネントの高さを引いたものと等しくなります。
Screen.availWidth: ブラウザウィンドウの利用可能な画面幅 (ピクセル単位)。
Screen.pixelDepth: 画面上のカラービット数を示す整数。たとえば、24 は画面が 24 ビットカラーを提供することを意味します。
Screen.colorDepth: Screen.pixelDepthのエイリアス。厳密に言うと、colorDepth はアプリケーションの色深度を表し、pixelDepth は画面の色深度を表し、ほとんどの場合、これらは同じものです。
Screen.orientation: 画面の向きを表すオブジェクトを返します。このオブジェクトの type 属性は文字列で、画面の特定の方向を示します。 landscape-primary は水平配置を意味し、 landscape- Secondary は上下逆の水平配置を意味し、 portrait-primary は垂直配置を意味します。「ポートレート - セカンダリ」とは、上下逆の垂直配置を意味します。

以下は「Screen.orientation」の例です。

ウィンドウの画面の向き
// { 角度: 0、タイプ: "landscape-primary"、onchange: null }

以下の例では、1024 x 768 を超える画面解像度が保証されています。

if (window.screen.width >= 1024 && window.screen.height >= 768) {
  //解像度は1024x768以上です
}

以下は、画面の幅に基づいてユーザーを異なる Web ページに誘導するコードです。

if ((screen.width <= 800) && (screen.height <= 600)) {
  window.location.replace('small.html');
} それ以外 {
  window.location.replace('wide.html');
}

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

前の章次の章