JavaScript の navigator.userAgent がブラウザ情報を取得するケースの説明

JavaScript の navigator.userAgent がブラウザ情報を取得するケースの説明

ブラウザはおそらく私たちにとって最も馴染みのあるツールです。 Firefox、Opera、Safari、IE、Chrome といったよく知られたブラウザに加え、世界には 100 種類近くのブラウザがあると言われています。通常、開発を行う際には、さまざまなブラウザに対応する必要があるため、ブラウザの種類やシステムの判断を精緻化することが重要です。

まず、User-Agent とは何かを見てみましょう。 User-Agent は HTTP リクエスト内のユーザー識別子であり、通常はブラウザの種類、オペレーティング システムなどのクライアントの種類を表す文字列やその他の情報を送信します。 User-Agent の合意された形式は、アプリケーション名、スラッシュ、バージョン番号の順で、残りは自由形式です。

ここではいくつかのブラウザのみ紹介します

クロム

iPhone用Safari

IE

次に、閲覧タイプとシステムを取得する関数をカプセル化し、必要な場所で呼び出します。

// すべての主要ブラウザ関数 getBrowser() {
    var u = navigator.userAgent;
 
    var bws = [{
        名前: 'sgssapp',
        it: /sogousearch/i.test(u)
    }, {
        名前: 'wechat',
        it: /MicroMessenger/i.test(u)
    }, {
        名前: 'weibo'、
        it: !!u.match(/Weibo/i)
    }, {
        名前: 'uc',
        !!u.match(/UCBrowser/i) || u.indexOf('UBrowser') > -1
    }, {
        名前: 'ソゴウ',
        u.indexOf('MetaSr') > -1 || u.indexOf('Sogou') > -1
    }, {
        名前: 'xiaomi',
        u.indexOf('MiuiBrowser') > -1 です
    }, {
        名前: '百度',
        u.indexOf('Baidu') > -1 || u.indexOf('BIDUBrowser') > -1
    }, {
        名前: '360',
        u.indexOf('360EE') > -1 || u.indexOf('360SE') > -1
    }, {
        名前: '2345',
        u.indexOf('2345Explorer') > -1 です
    }, {
        名前: 'エッジ'、
        u.indexOf('Edge') > -1 です
    }, {
        名前: 'ie11',
        u.indexOf('Trident') > -1 && u.indexOf('rv:11.0') > -1 です
    }, {
        名前: 'ie',
        u.indexOf('compatible') > -1 && u.indexOf('MSIE') > -1 です
    }, {
        名前: 'firefox',
        u.indexOf('Firefox') > -1 です
    }, {
        名前:「サファリ」
        u.indexOf('Safari') > -1 && u.indexOf('Chrome') === -1 です
    }, {
        名前: 'qqbrowser',
        u.indexOf('MQQBrowser') > -1 && u.indexOf(' QQ') === -1
    }, {
        名前: 'qq',
        u.indexOf('QQ') > -1 です
    }, {
        名前: 'クロム'、
        u.indexOf('Chrome') > -1 || u.indexOf('CriOS') > -1
    }, {
        名前: 'オペラ',
        u.indexOf('Opera') > -1 || u.indexOf('OPR') > -1
    }];
 
    (var i = 0; i < bws.length; i++) の場合 {
        (bws[i].it)の場合{
            bws[i].nameを返します。
        }
    }
 
    'other' を返します。
}
 
// システム微分関数 getOS() {
    var u = navigator.userAgent;
    if (!!u.match(/compatible/i) || u.match(/Windows/i)) {
        'windows' を返します。
    } そうでない場合 (!!u.match(/Macintosh/i) || u.match(/MacIntel/i)) {
        'macOS' を返します。
    } そうでない場合 (!!u.match(/iphone/i) || u.match(/Ipad/i)) {
        'ios' を返します。
    } そうでない場合 (!!u.match(/android/i)) {
        'android' を返します。
    } それ以外 {
        'other' を返します。
    }
}

これで、JavaScript navigator.userAgent によるブラウザ情報取得の事例紹介は終了です。JavaScript navigator.userAgent によるブラウザ情報取得に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript BOMの構成と一般的なイベントの詳細な説明
  • JavaScript における BOM と DOM の詳細な説明
  • JavaScript 履歴オブジェクトの説明
  • JavaScript 履歴オブジェクトの原理分析
  • JSロケーションを使用して検索ボックスの履歴機能を実装する
  • JavaScript BOM ロケーション オブジェクト + ナビゲーター オブジェクト + 履歴オブジェクト

<<:  MySQL ビューの一貫性を確保する方法の詳細な説明 (チェック オプション付き)

>>:  nginx-ingress-controller ログ永続化ソリューションのソリューション

推薦する

CSS3 ボタン境界アニメーションの実装

まず効果を見てみましょう: html <a href="#"> &l...

HTMLフォームアプリケーションにはチェックボックスとラジオボタンの使用が含まれます

チェックボックスやラジオボタンの使用を含むコードをコピーコードは次のとおりです。 <!DOCT...

MySQL 5.7.17 とワークベンチのインストールと設定のグラフィックチュートリアル

この記事では、MySQL 5.7.17ワークベンチのインストールと設定方法を参考までに紹介します。具...

Vueは複数のカウントダウンを同時に設定する機能を実装しています

この記事の例では、複数のカウントダウンを同時に設定するためのVueの具体的なコードを参考までに共有し...

MySQL 8.0.16 winx64 のインストールと設定方法のグラフィックチュートリアル

最近、データベースについて学び始めました。最初にやったことは、データベースとは何か、データベースとデ...

Linux 構成 SSH パスワードフリーログイン「ssh-keygen」の基本的な使い方

目次1 SSHとは何か2 SSHパスワードフリーログインを設定する2.1 必要なソフトウェアのインス...

一般的な XHTML タグの紹介

<br />しばらくの間、多くの人が XHTML の使い方を知らないことに気付きました。...

Vue でデータコレクターを設計する

目次シナリオ中核問題ステータス監視状態監視の利点国家監視の欠点復興実行のアイデア依存関係の収集要約す...

よく使われる Docker コマンドと例の概要と分析

目次1. コンテナライフサイクル管理(1)ドッカー実行(2)スタート/ストップ/リスタート(3)ドッ...

require/import キーワードを使用して v-for ループでローカル画像をインポートするいくつかの方法

目次問題の説明方法 1 (バックエンドが画像 URL を返す)方法 2 (フロントエンドで requ...

HTML テーブルタグチュートリアル (25): 垂直配置属性 VALIGN

垂直方向では、行の配置を上、中央、下に設定できます。基本的な構文<TR VALIGN=&quo...

MySQL 8.0.21 の最新バージョンのダウンロード、インストール、設定に関する詳細なチュートリアル

1. ダウンロード1. インストールパッケージをダウンロードするMySQL ダウンロード パス: h...

MySQL Shell import_tableデータインポートの実装

目次1. import_tableの紹介2. データのロードとテーブル関数のインポートの例2.1 L...

MySQL 文字セットの変更に関する実践的なチュートリアル

序文: MySQL では、システムが多くの文字セットをサポートしており、異なる文字セット間にはわずか...

CentOS 上の Docker に Jupyter をインストールしてポートを開く方法

目次jupyterをインストールするDocker ポートマッピングjupyterをインストールするp...