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 ログ永続化ソリューションのソリューション

推薦する

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

このチュートリアルでは、MySQL 5.7のインストールと設定方法を参考までに紹介します。具体的な内...

Linux Zabbixカスタム監視およびアラーム実装プロセスの分析

ターゲットzabbix フロントエンド監視の iostat コマンドでデータの 1 つを表示します。...

Bootstrapグリッドの垂直および水平配置の詳細な説明

目次1. Bootstrap グリッドレイアウト2. 垂直方向の配置2.1 行タグの垂直方向の配置を...

メタタグを簡単に説明すると

META タグは、一般的に タグと呼ばれ、HTML Web ページのソース コード内の重要な HTM...

Nginx gzip設定について

nginx がリソース圧縮を実現する原理は、ngx_http_gzip_module モジュールを介...

FileZilla 425 FTP に接続できない (Alibaba クラウド サーバー) の解決策

Alibaba Cloud ServerがFTPに接続できないFileZilla 425 データ接続...

MySQLへの外部ネットワークアクセスを許可し、MySQLアカウントのパスワードを変更する方法

mysqlのrootアカウント、普段はlocalhostか127.0.0.1で接続しています。会社の...

mysqlreplicate を使って MySQL マスタースレーブを素早く構築する方法

導入mysql-utilities ツールセットは、DBA のツールボックスとも言えるさまざまなツー...

React と Threejs を使用して VR パノラマ プロジェクトを作成する詳細なプロセス

最近、 Three.jsでReactを使用して、720 度のパノラマ写真を閲覧できるプロジェクトを構...

CSS (カスケーディング スタイル シート) の一般的な用語の概要

CSS を使用する場合は、DOCTYPE (ドキュメント タイプ定義) を記述することを忘れないでく...

MySql のインデックス、ロック、トランザクションの知識ポイントのまとめ

この記事では、MySql のインデックス、ロック、トランザクションに関する知識のポイントをまとめてい...

vsftpd ユーザーが ssh 経由でログインすることを禁止する方法

序文vsftp は使いやすく安全な FTP サーバー ソフトウェアです。システムユーザーまたは仮想ユ...

MySQLにおけるトランザクション分離レベルの実装原理の詳細な説明

序文データベース トランザクションに関して言えば、トランザクションの ACID 特性、分離レベル、解...

Vueはechartsに基づいて3次元の縦棒グラフを実装します

3次元縦棒グラフは、正面、右側、上部の3つの部分で構成されています。描画するときは、正面をグラフィッ...

コード標準では、SQL ステートメントに結合が多すぎないようにする必要があるのはなぜですか?

無料ポイントインタビュアー:Linuxを使ったことはありますか?私:はいインタビュアー:メモリ使用量...