javascript - ブラウザの名前をクライアント側で取得する

Question

クライアント側のブラウザに関するデータを返すオブジェクトまたはメソッドはありますか？

たとえば、ブラウザがIE（Interner Explorer）であるかどうかを検出する必要があります。以下はコードスニペットです。

function isInternetExplorer()
{
    if(navigator.appName.indexOf("Microsoft Internet Explorer") != -1)
    {
        return true;
    }
    return false;
}

もっと良い方法はありますか？

score 23 · Accepted Answer

JavaScript side - you can get browser name like these ways...

if(window.navigator.appName == "") OR if(window.navigator.userAgent == "")

score 14 · Accepted Answer

編集: jquery の新しいバージョンでは答えが有効ではないため、jQuery.browser はバージョン 1.9 で非推奨になっているため、Jquery Migrate Pluginを使用してください。

元の回答

jQuery.browser

jQuery.browser と jQuery.browser.version

あなたの行く道は...

score 6 · Accepted Answer

C# では、次を使用してブラウザ名を指定します。

System.Web.HttpBrowserCapabilities browser = Request.Browser;

詳細はリンク先をご覧ください。

http://msdn.microsoft.com/en-us/library/3yekbd5b%28v=vs.100%29.aspx

クライアント側では：

JQuery:

jQuery.browser

詳細については、次のリンクを参照してください。

http://api.jquery.com/jQuery.browser/

score 4 · Accepted Answer

ブラウザはでそれを開示しnavigator.userAgentます。jQueryを使用している場合はjQuery.browser、@RabNawazが言ったように使用することをお勧めします。ただし、APIドキュメントに記載されているように、可能であれば機能のサポートを確認することをお勧めします。ドキュメントの引用：

このプロパティの使用はお勧めしません。代わりに機能検出を使用してみてください（jQuery.supportを参照）。jQuery.browserは、jQueryの将来のリリースでプラグインに移動される可能性があります。

コード例は次のとおりです。

function isIE() {
    if (window.jQuery) {
        return jQuery.browser.msie || false;
    } else {
        // adapted from jQuery's source:
        return navigator.userAgent.toLowerCase().indexOf('msie') >= 0;
    }
}

score 3 · Accepted Answer

これはで答えられます

Safari、Chrome、IE、Firefox、Opera ブラウザを検出する方法は?

this フィドルをチェックしてください。

お役に立てれば。

score 3 · Accepted Answer

私はシントリアスの答えが好きでしたが、もう少し現代的な構文で少し更新したかったのです。

  const { userAgent } = window.navigator;
  const browser =
    userAgent.indexOf('edge') > -1 ? 'edge'
      : userAgent.indexOf('edg') > -1 ? 'chromium based edge'
      : userAgent.indexOf('opr') > -1 && !!window.opr ? 'opera'
      : userAgent.indexOf('chrome') > -1 && !!window.chrome ? 'chrome'
      : userAgent.indexOf('trident') > -1 ? 'ie'
      : userAgent.indexOf('firefox') > -1 ? 'firefox'
      : userAgent.indexOf('safari') > -1 ? 'safari'
      : 'other';
  
  console.log(`${userAgent.toLowerCase()}\n${browser}`);

score 2 · Accepted Answer

それはあなたが本当にやりたいことですが、ブラウザの検出を回避し、機能を確認するのが最善の方法です。Canvas、Audio、WebSocketsなど、単純な JavaScript 呼び出しまたは CSS を介して、私にとって最善の方法はModernizRのようなツールを使用することです。

navigator.userAgent(ユーザーが構成可能な)プロパティによってブラウザーを検出する「UA スニッフィング」を実行する従来の (しかし非常に信頼性の低い) 方法とは異なり、 Modernizr は実際の機能検出を行って、さまざまなブラウザーができることとできないことを確実に識別します。

CSS を使用している場合は、次のようにできます。

.no-js .glossy,
.no-cssgradients .glossy {
    background: url("images/glossybutton.png");
}

.cssgradients .glossy {
    background-image: linear-gradient(top, #555, #333);
}

要素のクラス名としてすべての機能をロードして追加し<html>、CSS に関して必要に応じて行うことができるためです。

また、機能にファイルをロードすることもできます。たとえば、ブラウザがネイティブサポートされていない場合は、ポリフィル js と css をロードします。

Modernizr.load([
  // Presentational polyfills
  {
    // Logical list of things we would normally need
    test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
    // Modernizr.load loads css and javascript by default
    nope : ['presentational-polyfill.js', 'presentational.css']
  },
  // Functional polyfills
  {
    // This just has to be truthy
    test : Modernizr.websockets && window.JSON,
    // socket-io.js and json2.js
    nope : 'functional-polyfills.js',
    // You can also give arrays of resources to load.
    both : [ 'app.js', 'extra.js' ],
    complete : function () {
      // Run this after everything in this group has downloaded
      // and executed, as well everything in all previous groups
      myApp.init();
    }
  },
  // Run your analytics after you've already kicked off all the rest
  // of your app.
  'post-analytics.js'
]);

JavaScript から機能をリクエストする簡単な例:

http://jsbin.com/udoyic/1

score 0 · Accepted Answer

is.jsに基づいて、次のようなブラウザー名を取得するためのヘルパーファイルを作成できます。

const Browser = {};
const vendor = (navigator && navigator.vendor || '').toLowerCase();
const userAgent = (navigator && navigator.userAgent || '').toLowerCase();

Browser.getBrowserName = () => {
  if(isOpera()) return 'opera'; // Opera
  else if(isChrome()) return 'chrome'; // Chrome
  else if(isFirefox()) return 'firefox'; // Firefox
  else if(isSafari()) return 'safari'; // Safari
  else if(isInternetExplorer()) return 'ie'; // Internet Explorer
}


// Start Detecting browser helpers functions
function isOpera() {
  const isOpera = userAgent.match(/(?:^opera.+?version|opr)\/(\d+)/);
  return isOpera !== null;
}

function isChrome() {
  const isChrome = /google inc/.test(vendor) ? userAgent.match(/(?:chrome|crios)\/(\d+)/) : null;
  return isChrome !== null;
}

function isFirefox() {
  const isFirefox = userAgent.match(/(?:firefox|fxios)\/(\d+)/);
  return isFirefox !== null;
}

function isSafari() {
  const isSafari = userAgent.match(/version\/(\d+).+?safari/);
  return isSafari !== null;
}

function isInternetExplorer() {
  const isInternetExplorer = userAgent.match(/(?:msie |trident.+?; rv:)(\d+)/);
  return isInternetExplorer !== null;
}
// End Detecting browser helpers functions

export default Browser;

このファイルを必要な場所にインポートするだけです。

import Browser from './Browser.js';

const userBrowserName = Browser.getBrowserName() // return your browser name
                                                 // opera | chrome | firefox | safari | ie

javascript - ブラウザの名前をクライアント側で取得する

11 に答える 11

Related

Reference