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

822

FF、Chrome、IE、Opera、Safari用の5つのアドオン/拡張機能があります。

ユーザーのブラウザーを認識して、対応するアドオンをダウンロードするために（インストールボタンがクリックされたら）リダイレクトするにはどうすればよいですか？

javascript  browser-detection 
— フランクC
ソース
2
detectjsを試してみてください、それはすべてのブラウザのために使用することができます
— 男
1
— Matthijs Wessels
2
detect.jsは（github.com/darcyclarke/Detect.jsによると）メンテナンスされなくなったため、github.com
— lancedikson /
私はUAParserプラグインを使用しました。これはVanilla JavaScriptで記述されています。出典：JavaScriptを使用してブラウザー、エンジン、OS、CPU、デバイスを検出する方法
— Luzan Baral
— KyleMit

回答:

1688

ブラウザの信頼できる検出のためにグーグルすると、多くの場合、ユーザーエージェント文字列がチェックされます。この方法は、この値を偽装するのは簡単であるため、信頼できません。ダックタイピング
によってブラウザを検出するメソッドを作成しました。

ブラウザーの検出方法は、拡張機能をインストールするためのブラウザー固有の指示を表示するなど、本当に必要な場合にのみ使用してください。可能な場合は機能検出を使用します。

デモ：https : //jsfiddle.net/6spj1059/

// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]" 
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));

// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1 - 79
var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

// Edge (based on chromium) detection
var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;


var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isEdge: ' + isEdge + '<br>';
output += 'isEdgeChromium: ' + isEdgeChromium + '<br>';
output += 'isBlink: ' + isBlink + '<br>';
document.body.innerHTML = output;
スニペットを展開

信頼性の分析

従来の方法は、レンダリングエンジンの特性に依存する（-moz-box-sizing及び-webkit-transformブラウザを検出します）。これらのプレフィックスは最終的には削除されるので、検出をさらに堅牢にするために、ブラウザー固有の特性に切り替えました。

  • Internet Explorer：JScriptの条件付きコンパイル（IE9まで）およびdocument.documentMode。
  • Edge：TridentおよびEdgeブラウザーでは、Microsoftの実装はStyleMediaコンストラクターを公開します。トライデントを除外すると、エッジが残ります。
  • エッジ（クロムに基づく）：ユーザーエージェントの末尾に値「Edg / [バージョン]」が含まれています（例：「Mozilla / 5.0（Windows NT 10.0; Win64; x64）AppleWebKit / 537.36（KHTML、like Gecko）Chrome / 80.0.3987.16 Safari / 537.36 Edg / 80.0.361.9」）。
  • Firefox：アドオンをインストールするためのFirefoxのAPI： InstallTrigger
  • Chrome：chromeドキュメント化されたchrome.webstoreオブジェクトを含むいくつかのプロパティを含むグローバルオブジェクト。
  • Update 3 chrome.webstoreは非推奨であり、最近のバージョンでは未定義です
  • Safari：コンストラクターの命名におけるユニークな命名パターン。これは、リストされたすべてのプロパティの中で最も耐久性の低い方法であり、何を推測しますか？Safari 9.1.3では修正されました。だから私たちはチェックしていますSafariRemoteNotification、バージョン7.1以降に導入された3.0からすべてのSafarisをカバーするためにています。
  • Opera：window.opera何年も存在していますが、今後は削除されます、OperaがエンジンをBlink + V8（Chromiumで使用）に置き換えるされます。
  • 更新1：Opera 15がリリースされました。そのUA文字列はChromeのように見えますが、「OPR」が追加されています。このバージョンでは、chromeオブジェクトが定義されています（ただし、chrome.webstoreいません）。OperaはChromeのクローン作成に一生懸命取り組んでいるため、この目的のためにユーザーエージェントスニッフィングを使用しています。
  • アップデート2：Opera 20+（エバーグリーン）の!!window.opr && opr.addons検出に使用できます。
  • Blink：GoogleがChrome 28をオンに切り替えたときCSS.supports() にBlinkで導入されました。もちろん、Operaで使用されているのと同じBlinkです。

正常にテストされた：

  • Firefox 0.8〜61
  • Chrome 1.0〜71
  • Opera 8.0-34
  • Safari 3.0〜10
  • IE 6〜11
  • エッジ-20-42
  • エッジ開発-80.0.361.9

2016年11月に更新され、9.1.3以降のSafariブラウザーの検出が含まれるようになりました

2018年8月に更新され、Chrome、Firefox IE、Edgeで成功した最新のテストを更新します。

2019年1月に更新され、chrome windowの検出を修正し（window.chrome.webstoreのサポートが終了したため）、Chromeで成功した最新のテストを含めました。

2019年12月に更新され、（@ Nimeshコメントに基づいて）Chromium検出に基づいてEdgeを追加しました。

— Rob W
ソース
5
参考：これは、Chrome拡張機能でwindow.chrome.webstoreは定義されていないため、機能しません。Firefox拡張機能で確認していません。 is.js他の場所で述べたように、ChromeとFirefoxの両方の拡張機能で機能します。
— nevf
60
isSafariSafari 10では動作しません。これは悪い解決策だと主張します（良い解決策があるわけではありません）。チェック対象が削除されない、または他のブラウザによって追加されないことの多くは保証されません。Safariのチェックにこのコードを使用していたすべてのサイトは、macOS SierraまたはSafari 10のアップグレードで
— 壊れました
10
しかし、これはそれらのブラウザのモバイルバージョンとデスクトップバージョンでもテストされていますか？そして正直なところ、プラットフォームごとに異なるモバイルバージョンと異なるデスクトップバージョンがあります。つまり、FirefoxにはWindows、Linux、Mac OS用の3つのバイナリと、AndroidおよびiOS用の2つのバイナリがあります。
— DrZ214
3
Safari 10.1.2のisSafari下<iframe>では電流は機能しません
— Mikko Ohtamaa '14
23
window.chrome.webstoreはChromeバージョンから廃止されました。71：blog.chromium.org/2018/06/...
— st_bk
133

以下の方法でブラウザのバージョンを確認できます。

    <!DOCTYPE html>
    <html>
    <body>
    <p>What is the name(s) of your browser?</p>
    <button onclick="myFunction()">Try it</button>
    <p id="demo"></p>
    <script>

    function myFunction() { 
     if((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1 ) 
    {
        alert('Opera');
    }
    else if(navigator.userAgent.indexOf("Chrome") != -1 )
    {
        alert('Chrome');
    }
    else if(navigator.userAgent.indexOf("Safari") != -1)
    {
        alert('Safari');
    }
    else if(navigator.userAgent.indexOf("Firefox") != -1 ) 
    {
         alert('Firefox');
    }
    else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10
    {
      alert('IE'); 
    }  
    else 
    {
       alert('unknown');
    }
    }
    </script>

    </body>
    </html>

IEブラウザのバージョンのみを知る必要がある場合は、以下のコードに従ってください。このコードは、IE6からIE11までのバージョンでうまく機能します

<!DOCTYPE html>
<html>
<body>

<p>Click on Try button to check IE Browser version.</p>

<button onclick="getInternetExplorerVersion()">Try it</button>

<p id="demo"></p>

<script>
function getInternetExplorerVersion() {
   var ua = window.navigator.userAgent;
        var msie = ua.indexOf("MSIE ");
        var rv = -1;

        if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer, return version number
        {               

            if (isNaN(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))))) {
                //For IE 11 >
                if (navigator.appName == 'Netscape') {
                    var ua = navigator.userAgent;
                    var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
                    if (re.exec(ua) != null) {
                        rv = parseFloat(RegExp.$1);
                        alert(rv);
                    }
                }
                else {
                    alert('otherbrowser');
                }
            }
            else {
                //For < IE11
                alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
            }
            return false;
        }}
</script>

</body>
</html>
— ニメッシュ
ソース
3
なぜそれほど多くのコード行を書くのでしょうか？userAgentがあいまいです。
— igaurav
5
Microsoft Edgeはどうですか？
— user6031759 2016年
3
上記の答えは、サファリをチェックする前にクロムをチェックします。Safariはchromeuseragentにキーワードがないためです。サファリユーザーエージェントの例mozilla/5.0 (macintosh; intel mac os x 10_11_5) applewebkit/601.6.17 (khtml, like gecko) version/9.1.1 safari/601.6.17
— Golak Sarangi
11
Stackoverflowはこの方法を使用しています
— vityavv
3
これをOpera（最新バージョン）でテストすると、「Chrome」が返されます。この問題を解決するために、私はオペラを変更if文に：if(navigator.userAgent.indexOf("Opera") != -1 || navigator.userAgent.indexOf('OPR') != -1 )
— カイルVassella
60

そのためにlibを使用するのはやり過ぎかもしれませんが、スレッドを充実させるために、is.jsでこれを行う方法を確認できます。

is.firefox();
is.ie(6);
is.not.safari();
— ラファエル・アイン
ソース
9
注目に値するのは、内部的には主にユーザーエージェントの検出を行うことです。ベンダー検出/一部の機能検出が追加されました。
— TygerKrash、2015年
1
@TygerKrash確かに、あなたは絶対的に正しいです。それが実際に私が私の答えで意味したことです：のソースコードを開いて、is.jsそれがどのように行われるかを確認してください。
— Rafael Eyng 2016
4
以前使用していたjQueryは同様のプロパティを含んでいました：$ .browser.msie ...バージョン1.9から削除されましたapi.jquery.com/jquery.browser
— Riga
@RafaelEyng：ユーザーエージェントを検出する際の問題は、この方法が信頼できないことだと思います。
— HoldOffHunger 2017年
これは、UA文字列が変更されていないと想定する場合、間違いなく最も堅牢なアプローチです。また、OS（android、win、mac、linux）を適切に検出します。デバイスの種類（デスクトップ、タブレット、モバイル）。ブラウザのバージョンをテストすることもできます。
— カシラジャ
51

2019年12月の時点でのブラウザー検出を処理するいくつかの有名なライブラリを次に示します。

クッパ by lancedikson-4,065★s-最終更新日：2019年10月2日-4.8KB

var result = bowser.getParser(window.navigator.userAgent);
console.log(result);
document.write("You are using " + result.parsedResult.browser.name +
               " v" + result.parsedResult.browser.version + 
               " on " + result.parsedResult.os.name);
<script src="https://unpkg.com/bowser@2.7.0/es5.js"></script>
スニペットを展開

* ChromiumベースのEdgeをサポート

Platform.js by bestiejs-2,550★秒-最終更新日：2019年4月14日-5.9KB

console.log(platform);
document.write("You are using " + platform.name +
               " v" + platform.version + 
               " on " + platform.os);
<script src="https://cdnjs.cloudflare.com/ajax/libs/platform/1.3.5/platform.min.js"></script>
スニペットを展開

gabcebによるjQueryブラウザー -504★s-最終更新日2015年11月23日-1.3KB

console.log($.browser)
document.write("You are using " + $.browser.name +
               " v" + $.browser.versionNumber + 
               " on " + $.browser.platform);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-browser/0.1.0/jquery.browser.min.js"></script>
スニペットを展開

Detect.js（アーカイブ済み） by darcyclarke-522★s-最終更新2015年10月26日-2.9KB

var result = detect.parse(navigator.userAgent);
console.log(result);
document.write("You are using " + result.browser.family +
               " v" + result.browser.version + 
               " on " + result.os.family);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Detect.js/2.2.2/detect.min.js"></script>
スニペットを展開

ブラウザ検出（アーカイブ済み）、QuirksMode-2013年11月14日最終更新-884B

console.log(BrowserDetect)
document.write("You are using " + BrowserDetect.browser +
               " v" + BrowserDetect.version + 
               " on " + BrowserDetect.OS);
<script src="https://kylemit.github.io/libraries/libraries/BrowserDetect.js"></script>
スニペットを展開

注目すべき言及：

  • WhichBrowser -1,355★秒-最終更新日：2018年10月2日
  • Modernizr -23,397★秒-最終更新日：2019年1月12日-給餌された馬に餌をやるには、機能の検出でcanIuseスタイルの質問を駆動する必要があります。ブラウザー検出は、実際には、カスタマイズされた画像、ダウンロードファイル、または個々のブラウザーの指示を提供するためだけのものです。

参考文献

— カイルミット
ソース
1
ホイールを再発明しないためには、オーバーヘッドの数キロバイトの価値があります。
— グリフ
46

誰かがこれが便利だと思った場合に備えて、私はRob Wの答えを、複数の変数を浮動させるのではなく、ブラウザ文字列を返す関数にしました。ブラウザーはまた、最初からもう一度ロードしなければ実際には変更できないので、次に関数が呼び出されたときにそれを実行する必要がないように、結果をキャッシュするようにしました。

/**
 * Gets the browser name or returns an empty string if unknown. 
 * This function also caches the result to provide for any 
 * future calls this function has.
 *
 * @returns {string}
 */
var browser = function() {
    // Return cached result if avalible, else get result then cache it.
    if (browser.prototype._cachedResult)
        return browser.prototype._cachedResult;

    // Opera 8.0+
    var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

    // Firefox 1.0+
    var isFirefox = typeof InstallTrigger !== 'undefined';

    // Safari 3.0+ "[object HTMLElementConstructor]" 
    var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

    // Internet Explorer 6-11
    var isIE = /*@cc_on!@*/false || !!document.documentMode;

    // Edge 20+
    var isEdge = !isIE && !!window.StyleMedia;

    // Chrome 1+
    var isChrome = !!window.chrome && !!window.chrome.webstore;

    // Blink engine detection
    var isBlink = (isChrome || isOpera) && !!window.CSS;

    return browser.prototype._cachedResult =
        isOpera ? 'Opera' :
        isFirefox ? 'Firefox' :
        isSafari ? 'Safari' :
        isChrome ? 'Chrome' :
        isIE ? 'IE' :
        isEdge ? 'Edge' :
        isBlink ? 'Blink' :
        "Don't know";
};

console.log(browser());
スニペットを展開

— Willsquire
ソース
2
EdgeブラウザではChromeを
— Riz
2
@eFriend最新のブラウザテストの回答を更新しました。
— ピラウ
4
私はこれが好きですが、「わからない」ではなく、userAgent（）へのフォールバックを優先しました。
— HoldOffHunger 2017年
2
プロパティwindow.chrome.webstoreはChrome 71で削除されたため、このアプローチは機能しなくなりました。
— Bedla
関数を単にcachedResultを返す関数で上書きし、ifステートメントを省略できます。初めてあなたはまだ結果を返さなければなりません。browser = function（）{return cachedResult}; cachedResultを返します。
— Timar Ivo Batis
22

ショートバリアント

var browser = (function() {
    var test = function(regexp) {
        return regexp.test(window.navigator.userAgent);
    }
    switch (true) {
        case test(/edg/i): return "edge";
        case test(/opr/i) && (!!window.opr || !!window.opera): return "opera";
        case test(/chrome/i) && !!window.chrome: return "chrome";
        case test(/trident/i): return "ie";
        case test(/firefox/i): return "firefox";
        case test(/safari/i): return "safari";
        default: return "other";
    }
})();
console.log(browser)
スニペットを展開

— アレックスニクーリン
ソース
嫌いな人はその理由を説明してください。
— Alex Nikulin
2
これは、iOSで「クロム」を使用してブラウズしているときに「サファリ」を表示します
— Reza
11

これは、Microsoft EdgeとBlinkの検出を含む、2016年に調整されたRobの回答のバージョンです。

（編集：私は上記のロブの答えをこの情報で更新しました。）

// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
isFirefox = typeof InstallTrigger !== 'undefined';
// Safari 3.0+
isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);
// Internet Explorer 6-11
isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
isChrome = !!window.chrome && !!window.chrome.webstore;
// Blink engine detection
isBlink = (isChrome || isOpera) && !!window.CSS;

/* Results: */
console.log("isOpera", isOpera);
console.log("isFirefox", isFirefox);
console.log("isSafari", isSafari);
console.log("isIE", isIE);
console.log("isEdge", isEdge);
console.log("isChrome", isChrome);
console.log("isBlink", isBlink);
スニペットを展開

このアプローチの優れた点は、ブラウザーエンジンのプロパティに依存しているため、YandexやVivaldiなどの派生ブラウザーでさえ、それらのエンジンを使用する主要なブラウザーと実質的に互換性があることです。例外はOperaで、これはユーザーエージェントのスニッフィングに依存していますが、今日（つまり、ver。15以降）、Opera自体もBlinkのシェルにすぎません。

— ピラウ
ソース
!!window.MSAssertion;テストでは、リモートデスクトップ経由でエッジベータ版で私のために動作しません。falseを返します。
— ノア
@NoRどのバージョンのEdgeを使用していますか？重要です
— ピラウ2020年
1
@NoRああ、あなたはVMを使っています... MSAssertionトリックはバージョン25に調整されています。しかし、多くの開発者はVMに依存しているので、この古いバージョンに調整しようとします。よかった。ありがとう。
— Pilau
1
@NoR更新-将来性があるはずです。StyleMedia（大文字の）オブジェクトは、IEとエッジに特有のものであり、どこにでも行くしていないようです。
— Pilau
1
私はまた、UAParserがjsプラグインであることを発見しました。これはまだ維持されており、非常に正確で使いやすいものです。
— Issac Gable
9

tryおよびcatchを使用して、さまざまなブラウザのエラーメッセージを使用できます。IEとエッジは混同されていましたが、Rob Wのダックタイピングを使用しました（このプロジェクトに基づく：https : //www.khanacademy.org/computer-programming/i-have-opera/2395080328）。

var getBrowser = function() {        
    try {
        var e;
        var f = e.width;
    } catch(e) {
        var err = e.toString();

        if(err.indexOf("not an object") !== -1) {
            return "safari";
        } else if(err.indexOf("Cannot read") !== -1) {
            return "chrome";
        } else if(err.indexOf("e is undefined") !== -1) {
            return "firefox";
        } else if(err.indexOf("Unable to get property 'width' of undefined or null reference") !== -1) {
            if(!(false || !!document.documentMode) && !!window.StyleMedia) {
                return "edge";
            } else {
                return "IE";
            }
        } else if(err.indexOf("cannot convert e into object") !== -1) {
            return "opera";
        } else {
            return undefined;
        }
    }
};
— メイソン・ジョーンズ
ソース
これはすばらしいアイデアです。「ウィンドウ」オブジェクトも「ナビゲーター」オブジェクトも必要ありません。
— ヴァディム2017
私の提案は、ドキュメントとウィンドウを完全に取り除くことです。IEチャンクを参照してください。「firefox」を返します。} else if（err.search（ "[object Error]"）！== -1 && e.message！= null && e.description！= null）{return "IE"; } else if（err.search（ "eをオブジェクトに変換できません"）！== -1）{return "opera";
— Vadim
IEとエッジはどのように区別されますか？
— メイソンジョーンズ
奇妙なことに、もうerr.search（ "[object Error]"）を再現できません。とにかく、私にとっては、firefox vs chrome vs他の何かで十分です。ウィンドウとドキュメントオブジェクトが利用できないPACファイルで使用しています。
— Vadim
原因を突き止めました。PACファイルを調整するために、Windows 7は私のマシンにインストールされているIE11ではなく、IE7のようなエンジン（おそらくWindowsホストから）を使用しているようです。したがって、err.toString（）は "[オブジェクトエラー]"を示しますが、IE11内ではコードのように "プロパティを取得できません..."という文字列を示します。したがって、上記のコードはIE7で失敗するはずです。
— Vadim
8

皆さん、ありがとうございました。私はここのコードスニペットを最近のブラウザーでテストしました：Chrome 55、Firefox 50、IE 11およびEdge 38と私はそれらすべてのために私のために働く次の組み合わせを思いつきました。私はそれが改善されることができると確信していますが、それは必要な人のための迅速な解決策です：

var browser_name = '';
isIE = /*@cc_on!@*/false || !!document.documentMode;
isEdge = !isIE && !!window.StyleMedia;
if(navigator.userAgent.indexOf("Chrome") != -1 && !isEdge)
{
    browser_name = 'chrome';
}
else if(navigator.userAgent.indexOf("Safari") != -1 && !isEdge)
{
    browser_name = 'safari';
}
else if(navigator.userAgent.indexOf("Firefox") != -1 ) 
{
    browser_name = 'firefox';
}
else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10
{
    browser_name = 'ie';
}
else if(isEdge)
{
    browser_name = 'edge';
}
else 
{
   browser_name = 'other-browser';
}
$('html').addClass(browser_name);

これは、ブラウザーの名前でCSSクラスをHTMLに追加します。

— dnns
ソース
iOSでChromeをテストしましたか？
— ヴィック
8

それが誰にとっても便利かどうかはわかりませんが、TypeScriptを幸せにするためのバリエーションがあります。

export function getBrowser() {

// Opera 8.0+
if ((!!window["opr"] && !!["opr"]["addons"]) || !!window["opera"] || navigator.userAgent.indexOf(' OPR/') >= 0) {
    return 'opera';
}

// Firefox 1.0+
if (typeof window["InstallTrigger"] !== 'undefined') {
    return 'firefox';
}

// Safari 3.0+ "[object HTMLElementConstructor]" 
if (/constructor/i.test(window["HTMLElement"]) || (function(p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof window["safari"] !== 'undefined' && window["safari"].pushNotification))) {
    return 'safari';
}

// Internet Explorer 6-11
if (/*@cc_on!@*/false || !!document["documentMode"]) {
    return 'ie';
}

// Edge 20+
if (!(/*@cc_on!@*/false || !!document["documentMode"]) && !!window["StyleMedia"]) {
    return 'edge';
}

// Chrome 1+
if (!!window["chrome"] && !!window["chrome"].webstore) {
    return 'chrome';
}

// Blink engine detection
if (((!!window["chrome"] && !!window["chrome"].webstore) || ((!!window["opr"] && !!["opr"]["addons"]) || !!window["opera"] || navigator.userAgent.indexOf(' OPR/') >= 0)) && !!window["CSS"]) {
    return 'blink';
}

}

— トニー・スミス
ソース
条件として「false」のifがあるのはなぜですか。
— Yonatanニール
私は条件付きコンパイルを検出するためのものだと思う@YonatanNir：developer.mozilla.org/en-US/docs/Web/JavaScript/...
— ルーカスアゼベド
5

デスクトップおよびモバイルでのブラウザーの検出：Edge、Opera、Chrome、Safari、Firefox、IE

@nimeshコードにいくつかの変更を加えましたが、今ではEdgeでも機能し、Operaの問題は修正されています。

function getBrowserName() {

    if ( navigator.userAgent.indexOf("Edge") > -1 && navigator.appVersion.indexOf('Edge') > -1 ) {
        return 'Edge';
    }
    else if( navigator.userAgent.indexOf("Opera") != -1 || navigator.userAgent.indexOf('OPR') != -1 )
    {
        return 'Opera';
    }
    else if( navigator.userAgent.indexOf("Chrome") != -1 )
    {
        return 'Chrome';
    }
    else if( navigator.userAgent.indexOf("Safari") != -1)
    {
        return 'Safari';
    }
    else if( navigator.userAgent.indexOf("Firefox") != -1 ) 
    {
        return 'Firefox';
    }
    else if( ( navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true ) ) //IF IE > 10
    {
        return 'IE';
    }  
    else 
    {
        return 'unknown';
    }
}

ありがとう@nimeshユーザー：2063564

— イルシャドカーン
ソース
4

また、すべての一般的なブラウザで機能する「ハッキング」の少ない方法もあります。Googleは、ブラウザライブラリチェックをクロージャライブラリに含めました。具体的には、見ているgoog.userAgentとgoog.userAgent.product。このようにして、ブラウザーの表示方法に何か変更があった場合にも最新の状態になります（常に最新バージョンのクロージャーコンパイラーを実行する場合）。

— アルバート
ソース
ここでの回答のほとんどは、唯一の信頼できる方法である場合、「ハッキー」であることに関係していません。複数回指摘されているように、userAgentは簡単に偽装されるため、信頼できません。
— HoldOffHunger 2017年
4

特定のブラウザの数値バージョンを知る必要がある場合は、次のスニペットを使用できます。現在、Chrome / Chromium / Firefoxのバージョンが表示されます：

var match = $window.navigator.userAgent.match(/(?:Chrom(?:e|ium)|Firefox)\/([0-9]+)\./);
var ver = match ? parseInt(match[1], 10) : 0;
— バレラ・トゥマッシュ
ソース
2

UAParserは、userAgent文字列からブラウザ、エンジン、OS、CPU、およびデバイスタイプ/モデルを識別するための軽量JavaScriptライブラリの1つです。

利用可能なCDNがあります。ここでは、UAParserを使用してブラウザーを検出するためのサンプルコードを含めました。

<!doctype html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/ua-parser-js@0/dist/ua-parser.min.js"></script>
<script type="text/javascript">
    var parser = new UAParser();
    var result = parser.getResult();
    console.log(result.browser);     // {name: "Chromium", version: "15.0.874.106"}
</script>
</head>
<body>
</body>
</html>

今、あなたはの値を使用することができます result.browser、ページを条件付きでプログラムできます。

ソースチュートリアル：JavaScriptを使用してブラウザー、エンジン、OS、CPU、デバイスを検出する方法

— ルザン・バラル
ソース
3
千あなたは軽量呼び出すコードの行？
— deathangel908
1 
var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"},  
            {string: navigator.userAgent, subString: "OPR", identity: "Opera"},  

            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"}       
        ]
    };

    BrowserDetect.init();


    var bv= BrowserDetect.browser;
    if( bv == "Chrome"){
        $("body").addClass("chrome");
    }
    else if(bv == "MS Edge"){
     $("body").addClass("edge");
    }
    else if(bv == "Explorer"){
     $("body").addClass("ie");
    }
    else if(bv == "Firefox"){
     $("body").addClass("Firefox");
    }


$(".relative").click(function(){
$(".oc").toggle('slide', { direction: 'left', mode: 'show' }, 500);
$(".oc1").css({
   'width' : '100%',
   'margin-left' : '0px',
   });
});
— ニール・ウパディアイ
ソース
0

これは、ロブの元の回答と2016年のピラウの更新の両方を組み合わせたものです。

    var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
    // At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isIE Edge: ' + isEdge + '<br>';
document.body.innerHTML = output;
— ジョー・ボルグ
ソース
ユーザーが使用しているブラウザをユーザーに通知するポイントはありますか？彼らはすでにこれを知っていると思います。
— HoldOffHunger 2017年
1
@HoldOffHunger主な目的は、使用しているブラウザーをユーザーに通知することではなく、最も互換性のあるコードをアクティブなブラウザーに適合させることです。ユーザーが使用しているブラウザが非常に古く、バックウォーの互換性から除外されていない限り、ユーザーが最新のものに切り替えても、より良いエクスペリエンスを享受できることをユーザーに通知しても支障はありません
— Joe Borg
0

ここでは、どのブラウザが実行されているかを確認できます。

function isValidBrowser(navigator){

            var isChrome =  navigator.indexOf('chrome'),
            isFireFox= navigator.indexOf('firefox'),
            isIE = navigator.indexOf('trident') ,
            isValidChromeVer = parseInt(navigator.substring(isChrome+7, isChrome+8)) >= 4,
            isValidFireForVer = parseInt(navigator.substring(isFireFox+8, isFireFox+9)) >= 3,
            isValidIEVer = parseInt(navigator.substring(isIE+8, isIE+9)) >= 7;

            if((isChrome > -1 && isValidChromeVer){ console.log("Chrome Browser")}

            if(isFireFox > -1 && isValidFireForVer){ console.log("FireFox  Browser")}

            if(isIE > -1 && isValidIEVer)){ console.log("IE Browser")}


        }
— アジェイ・クマール
ソース
0

以下のutilメソッドを使用できます

utils.isIE = function () {
        var ver = navigator.userAgent;
        return ver.indexOf("MSIE") !== -1 || ver.indexOf("Trident") !== -1; // need to check for Trident for IE11
    };

    utils.isIE32 = function () {
        return (utils.isIE() && navigator.appVersion.indexOf('Win64') === -1);
    };

    utils.isChrome = function () {
        return (window.chrome);
    };

    utils.isFF64 = function () {
        var agent = navigator.userAgent;
        return (agent.indexOf('Win64') >= 0 && agent.indexOf('Firefox') >= 0);
    };

    utils.isFirefox = function () {
        return (navigator.userAgent.toLowerCase().indexOf('firefox') > -1);
    };
— NPE
ソース
0 
const isChrome = /Chrome/.test(navigator.userAgent)
const isFirefox = /Firefox/.test(navigator.userAgent)
— ランダイダ
ソース
残念ながら、それは良い答えではありません。EdgeのuserAgentメッセージにはChromeが含まれています。!! window.chrome &&（!! window.chrome.webstore || !! window.chrome.runtime）;を使用することをお勧めします。
— Przemo
-3

JavaScriptコードの1行で、ブラウザの名前がわかります。

function GetBrowser()
{
    return  navigator ? navigator.userAgent.toLowerCase() : "other";
}
— ニラフ・メタ
ソース
16
userAgentだけでは十分ではありません。たとえば、私のユーザーエージェントは「Mozilla / 5.0（Macintosh; Intel Mac OS X 10_10_4）AppleWebKit / 537.36（KHTML、like Gecko）Chrome / 45.0.2454.85 Safari / 537.36」で、Mozilla、Chrome、Safariに言及しています。私はどのブラウザタイプですか？
— eremzeit 2015
申し訳ありませんが、「どのブラウザタイプですか？」何が欲しいの？
— Nirav Mehta
1
@NiravMehta彼が意味したのは、navigator.userAgent可能なすべてのブラウザーを教えてくれるということです。したがって、これは本当に信頼できません。ユーザーが1つのブラウザーしか持っていない場合に機能する唯一のケースです。
— Baldráni
1
これはブラウザを検出する信頼できる方法ではありません。一部のuseragentにはchromeとsafariの両方が含まれているため、どちらを考慮して最後に検出する必要があるかはわかりませんが、useragentはWebページで変更できます。
— Juvenik 2017年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.