Bagaimana cara mendeteksi Safari, Chrome, IE, Firefox dan Opera browser?


822

Saya memiliki 5 addons / ekstensi untuk FF, Chrome, IE, Opera, dan Safari.

Bagaimana saya bisa mengenali browser pengguna dan mengarahkan ulang (setelah tombol instal telah diklik) untuk mengunduh addon yang sesuai?


2
coba mendeteksi, ini dapat digunakan untuk semua browser
Bung


2
detect.js tidak lagi dipertahankan (menurut github.com/darcyclarke/Detect.js ), mereka merekomendasikan github.com/lancedikson/bowser
YakovL

Saya menggunakan Plugin UAParser, ditulis dalam JavaScript Vanilla. Sumber: Bagaimana cara mendeteksi browser, mesin, OS, CPU, dan perangkat menggunakan JavaScript?
Luzan Baral

Jawaban:


1688

Googling untuk deteksi yang andal pada peramban sering kali menghasilkan pengecekan string Agen pengguna. Metode ini tidak dapat diandalkan, karena sepele untuk menipu nilai ini.
Saya telah menulis metode untuk mendeteksi browser dengan mengetik bebek .

Hanya gunakan metode deteksi peramban jika memang benar-benar diperlukan, seperti memperlihatkan petunjuk khusus peramban untuk memasang ekstensi. Gunakan deteksi fitur bila memungkinkan.

Demo: 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;

Analisis keandalan

The metode sebelumnya tergantung pada sifat dari mesin rendering ( -moz-box-sizingdan -webkit-transform) untuk mendeteksi browser. Awalan ini pada akhirnya akan dihapus, sehingga untuk membuat deteksi lebih kuat, saya beralih ke karakteristik khusus peramban:

  • Internet Explorer: Kompilasi bersyarat JScript (hingga IE9) dan document.documentMode.
  • Edge: Di browser Trident dan Edge, implementasi Microsoft memperlihatkan StyleMediakonstruktor. Mengecualikan Trident meninggalkan kita dengan Edge.
  • Edge (berdasarkan kromium): Agen pengguna menyertakan nilai "Edg / [versi]" di akhir (mis: "Mozilla / 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit / 537.36 (KHTML, seperti Gecko) Chrome / 80.0.3987.16 Safari / 537.36 Edg / 80.0.361.9 ").
  • Firefox: API Firefox untuk menginstal add-ons: InstallTrigger
  • Chrome: chromeObjek global , berisi beberapa properti termasuk chrome.webstoreobjek yang didokumentasikan .
  • Pembaruan 3 chrome.webstoresudah usang dan tidak terdefinisi dalam versi terbaru
  • Safari: Pola penamaan yang unik dalam penamaan konstruktornya. Ini adalah metode yang paling tidak tahan lama dari semua properti yang terdaftar dan coba tebak? Di Safari 9.1.3 sudah diperbaiki. Jadi kami memeriksa SafariRemoteNotification, yang diperkenalkan setelah versi 7.1, untuk mencakup semua Safaris dari 3.0 dan ke atas.
  • Opera: window.operatelah ada selama bertahun-tahun, tetapi akan dibatalkan ketika Opera mengganti mesinnya dengan Blink + V8 (digunakan oleh Chromium).
  • Pembaruan 1: Opera 15 telah dirilis , string UA-nya terlihat seperti Chrome, tetapi dengan tambahan "OPR". Dalam versi ini chromeobjek didefinisikan (tetapi chrome.webstoretidak). Karena Opera berusaha keras untuk mengkloning Chrome, saya menggunakan sniffing agen pengguna untuk tujuan ini.
  • Pembaruan 2: !!window.opr && opr.addonsdapat digunakan untuk mendeteksi Opera 20+ (evergreen).
  • Blink: CSS.supports() diperkenalkan di Blink setelah Google mengaktifkan Chrome 28. Ini tentu saja, Blink yang sama digunakan di Opera.

Berhasil diuji dalam:

  • Firefox 0.8 - 61
  • Chrome 1.0 - 71
  • Opera 8.0 - 34
  • Safari 3.0 - 10
  • IE 6 - 11
  • Tepi - 20-42
  • Edge Dev - 80.0.361.9

Diperbarui pada November 2016 untuk memasukkan deteksi browser Safari dari 9.1.3 ke atas

Diperbarui pada Agustus 2018 untuk memperbarui tes sukses terbaru pada chrome, firefox IE dan edge.

Diperbarui pada Januari 2019 untuk memperbaiki deteksi krom (karena penghentian window.chrome.webstore) dan menyertakan tes sukses terbaru tentang krom.

Diperbarui pada Desember 2019 untuk menambahkan Edge berdasarkan deteksi Chromium (berdasarkan komentar @Nimesh).


5
FYI Ini tidak berfungsi dengan Ekstensi Chrome seperti window.chrome.webstoreyang tidak ditentukan di sana. Belum memeriksanya dengan Ekstensi Firefox. is.jsdisebutkan di tempat lain tidak berfungsi di Chrome dan Firefox Extensions.
nevf

60
isSafaritidak bekerja dengan Safari 10. Saya akan berpendapat ini adalah solusi yang buruk (bukannya saya punya yang bagus). Tidak ada jaminan banyak hal yang Anda periksa tidak akan dihapus ATAU tidak akan ditambahkan oleh peramban lain. Setiap situs yang menggunakan kode ini untuk memeriksa Safari baru saja rusak dengan peningkatan MacOS Sierra atau Safari 10 :(
gman

10
Tetapi apakah ini telah diuji pada versi seluler dari browser tersebut dan juga versi desktop ? Dan sebenarnya, ada berbagai versi seluler dan versi desktop berbeda per platform. Jadi sebenarnya, firefox memiliki 3 binari untuk Windows, Linux, Mac OS, dan 2 binari untuk Android dan iOS.
DrZ214

3
Arus isSafaritidak berfungsi di <iframe>bawah Safari 10.1.2
Mikko Ohtamaa

23
window.chrome.webstore sudah usang mulai dari Chrome ver. 71: blog.chromium.org/2018/06/...
st_bk

133

Anda dapat mencoba cara berikut untuk memeriksa versi Browser.

    <!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>

Dan jika Anda hanya perlu mengetahui versi IE Browser maka Anda dapat mengikuti kode di bawah ini. Kode ini berfungsi dengan baik untuk versi IE6 ke 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
Mengapa seseorang menulis begitu banyak baris kode? userAgent ambigu.
igaurav

5
Bagaimana dengan Microsoft Edge?
user6031759

3
jawaban di atas memeriksa chrome sebelum memeriksa safari. karena safari tidak akan memiliki chromekata kunci dalam agen pengguna. contoh agen pengguna safari -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 menggunakan metode ini
vityavv

3
Saat menguji ini di Opera (versi terbaru), ini mengembalikan 'Chrome' untuk saya. Untuk memperbaikinya, saya mengubah pernyataan Opera if ke:if(navigator.userAgent.indexOf("Opera") != -1 || navigator.userAgent.indexOf('OPR') != -1 )
Kyle Vassella

60

Saya tahu mungkin terlalu banyak menggunakan lib untuk itu, tetapi hanya untuk memperkaya utas, Anda dapat memeriksa is.js cara melakukan ini:

is.firefox();
is.ie(6);
is.not.safari();

9
Hanya perlu dicatat bahwa di bawah tenda itu terutama melakukan deteksi Agen Pengguna. Dilengkapi dengan deteksi vendor / beberapa deteksi fitur di beberapa tempat.
TygerKrash

1
@TygerKrash yakin, Anda memang benar. Itulah sebenarnya yang saya maksud dengan jawaban saya: buka kode sumber is.jsdan periksa bagaimana mereka melakukannya.
Rafael Eyng

4
jQuery digunakan untuk menyertakan properti serupa: $ .browser.msie ... Dihapus dari versi 1.9 api.jquery.com/jquery.browser
Riga

@ RafaelEyng: Saya pikir masalah dengan melakukan deteksi User-Agent adalah bahwa metode ini tidak dapat diandalkan.
HoldOffHunger

Ini jelas merupakan pendekatan yang paling kuat ketika Anda menganggap bahwa string UA belum dimodifikasi. Ini juga mendeteksi OS (android, win, mac, linux) dengan benar; jenis perangkat (desktop, tablet, seluler). Itu juga dapat menguji untuk versi browser.
kashiraja

51

Berikut adalah beberapa perpustakaan terkemuka yang menangani deteksi peramban hingga Desember 2019.

Bowser oleh lancedikson - 4.065 ★ s - Terakhir diperbarui 2 Okt 2019 - 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>

* mendukung Edge berdasarkan Chromium


Platform.js oleh bestiejs - 2.550 ★ s - Terakhir diperbarui 14 Apr 2019 - 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>

jQuery Browser oleh gabceb - 504 ★ s - Terakhir diperbarui 23 Nov 2015 - 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 (Diarsipkan) oleh darcyclarke - 522 ★ s - Terakhir diperbarui 26 Okt 2015 - 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>

Deteksi Browser (Diarsipkan) oleh QuirksMode - Terakhir diperbarui 14 Nov 2013 - 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>


Sebutan Terkemuka:

  • WhichBrowser - 1.355 ★ s - Terakhir diperbarui 2 Okt 2018
  • Modernizr - 23.397 ★ s - Terakhir diperbarui 12 Januari 2019 - Untuk memberi makan kuda yang diberi makan, deteksi fitur harus mengarahkan setiap pertanyaan gaya canIuse . Deteksi browser sebenarnya hanya untuk menyediakan gambar khusus, mengunduh file, atau instruksi untuk masing-masing browser.

Bacaan lebih lanjut


1
Layak beberapa Kb overhead untuk tidak menemukan kembali kemudi.
mesin terbang

46

Jika ada yang menemukan ini berguna, saya telah membuat jawaban Rob W menjadi fungsi yang mengembalikan string browser daripada memiliki beberapa variabel yang mengambang. Karena browser juga tidak dapat benar-benar berubah tanpa memuat lagi, saya telah membuat cache hasil untuk mencegahnya perlu bekerja keluar saat fungsi berikutnya dipanggil.

/**
 * 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());


2
di browser Edge, ia mengembalikan Chrome
Riz

2
@ eFriend Saya memperbarui jawaban untuk tes browser terbaru.
pilau

4
Saya suka ini, tapi saya lebih suka mundur ke userAgent (), daripada "Tidak tahu".
HoldOffHunger

2
Properti window.chrome.webstoredihapus di Chrome 71, jadi pendekatan ini tidak lagi berfungsi.
Bedla

Anda bisa menimpa fungsi dengan fungsi yang hanya mengembalikan cachedResult dan menghilangkan pernyataan if. Pertama kali di sekitar Anda masih harus mengembalikan hasilnya. browser = function () {return cachedResult}; kembalikan cachedResult;
Timar Ivo Batis

22

Varian pendek

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)


Jika Anda tidak menyukai saya, tolong jelaskan mengapa.
Alex Nikulin

2
ini akan menampilkan 'safari' saat menjelajah dengan 'chrome' di ios
Reza

11

Inilah versi Rob yang disesuaikan pada 2016, termasuk Microsoft Edge dan deteksi Blink:

( sunting : Saya memperbarui jawaban Rob di atas dengan informasi ini.)

// 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);

Keindahan dari pendekatan ini adalah bahwa ia bergantung pada properti mesin browser, sehingga mencakup bahkan browser turunan, seperti Yandex atau Vivaldi, yang secara praktis kompatibel dengan browser utama yang mesinnya mereka gunakan. Pengecualiannya adalah Opera, yang bergantung pada sniffing agen pengguna, tetapi hari ini (yaitu ver. 15 ke atas) bahkan Opera sendiri hanya merupakan shell untuk Blink.


The !!window.MSAssertion;tes tidak bekerja untuk saya dalam versi beta Ujung melalui Remote Desktop. Ini mengembalikan false.
NoR

@ NoR Edge versi apa yang Anda gunakan? Itu penting
pilau

1
@ NoR Oh Anda menggunakan VM ... MSAssertionTriknya disesuaikan ke versi 25. Tetapi karena banyak pengembang bergantung pada VM, saya akan mencoba menyesuaikannya dengan versi yang lebih lama ini. Panggilan yang bagus. Terima kasih.
pilau

1
@NoR Diperbarui - harus futureproof. The StyleMedia(dikapitalisasi) objek khusus untuk IE dan Ujung dan tampaknya tidak akan terjadi di mana saja.
pilau

1
Saya juga menemukan UAParser sebuah plugin js yang masih dipertahankan dan telah sangat akurat dan mudah digunakan.
Issac Gable

9

Anda dapat menggunakan trydan catchmenggunakan berbagai pesan kesalahan browser. IE dan edge campur aduk, tetapi saya menggunakan pengetikan bebek dari Rob W (berdasarkan proyek ini di sini: 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;
        }
    }
};

Itu ide yang bagus: Anda tidak perlu benda "jendela", atau "navigator"!
Vadim

Saran saya adalah untuk menyingkirkan dokumen dan jendela sepenuhnya. Lihat potongan IE: return "firefox"; } lain jika (err.search ("[objek Error]")! == -1 && e.message! = null && e.description! = null) {return "IE"; } lain jika (err.search ("tidak dapat mengubah e menjadi objek")! == -1) {return "opera";
Vadim

Bagaimana cara membedakan antara IE dan edge?
Mason Jones

Aneh, saya tidak dapat mereproduksi err.search ("[objek Error]") lagi. Pokoknya, bagi saya firefox vs chrome vs beberapa hal lain sudah cukup. Saya menggunakannya dalam file PAC di mana jendela dan objek dokumen tidak tersedia.
Vadim

Baru tahu penyebabnya. Sepertinya untuk bersenang-senang file PAC Windows 7 tidak menggunakan IE11, yang diinstal pada mesin saya, melainkan mesin mirip IE7 (mungkin dari host Windows). Jadi err.toString () ada memberikan "[objek Kesalahan]" sementara di dalam IE11 itu memberi "Tidak dapat mendapatkan properti ..." string seperti dalam kode Anda. Jadi, kode di atas harus gagal dengan IE7.
Vadim

8

Terima kasih semuanya. Saya menguji cuplikan kode di sini di browser terbaru: Chrome 55, Firefox 50, IE 11 dan Edge 38 dan saya datang dengan kombinasi berikut yang bekerja untuk saya untuk mereka semua. Saya yakin ini dapat ditingkatkan, tetapi ini adalah solusi cepat untuk siapa pun yang membutuhkan:

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);

Itu menambah kelas CSS ke HTML, dengan nama browser.


apakah Anda menguji chrome di ios?
Vic

8

Tidak tahu apakah ini berguna bagi siapa pun tetapi di sini ada varian untuk membuat TypeScript bahagia.

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';
}

}


Mengapa Anda memiliki seandainya "salah" sebagai syarat?
Yonatan Nir

@YonatanNir Saya pikir ini dimaksudkan untuk mendeteksi kompilasi bersyarat: developer.mozilla.org/en-US/docs/Web/JavaScript/…
Lucas Azevedo

5

Mendeteksi Peramban di Desktop dan Seluler: Edge, Opera, Chrome, Safari, Firefox, IE

Saya melakukan beberapa perubahan pada kode @nimesh sekarang juga berfungsi untuk Edge, dan masalah Opera diperbaiki:

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';
    }
}

Terima kasih @nimesh pengguna: 2063564


4

Ada juga metode "peretasan" yang kurang berfungsi untuk semua peramban populer. Google telah memasukkan pemeriksaan browser di Perpustakaan Penutupan mereka . Secara khusus, lihat goog.userAgentdan goog.userAgent.product. Dengan cara ini, Anda juga terbarui jika ada perubahan dalam cara browser menampilkan diri (mengingat bahwa Anda selalu menjalankan versi terbaru dari kompilator penutupan.)


Sebagian besar jawaban di sini tidak berkaitan dengan "peretasan" jika mereka satu-satunya metode yang dapat diandalkan. userAgent, sebagaimana dicatat beberapa kali, mudah dipalsukan, dan karenanya tidak dapat diandalkan.
HoldOffHunger

4

Jika Anda perlu mengetahui versi numerik dari beberapa browser tertentu, Anda dapat menggunakan cuplikan berikut. Saat ini ia akan memberi tahu Anda versi 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 adalah salah satu Perpustakaan JavaScript yang ringan untuk mengidentifikasi browser, mesin, OS, CPU, dan tipe / model perangkat dari string userAgent.

Ada CDN yang tersedia. Di sini, saya telah memasukkan contoh kode untuk mendeteksi browser menggunakan 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>

Sekarang Anda dapat menggunakan nilai result.browseruntuk memprogram halaman Anda secara kondisional.

Sumber Tutorial: Bagaimana cara mendeteksi browser, mesin, OS, CPU, dan perangkat menggunakan JavaScript?


3
sebuah ribu baris kode Anda menelepon ringan?
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

Ini menggabungkan jawaban Rob asli dan pembaruan Pilau untuk 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;

Apakah ada gunanya memberi tahu pengguna browser apa yang mereka gunakan? Saya membayangkan mereka sudah tahu ini.
HoldOffHunger

1
@HoldOffHunger, maksud utamanya adalah untuk mengadaptasi kode yang paling kompatibel ke browser aktif, daripada memberi tahu pengguna browser mana yang mereka gunakan. Kecuali jika peramban yang mereka gunakan sudah ketinggalan jaman dan telah dikecualikan dari kompatibilitas backwars, di mana tidak ada salahnya untuk memberi tahu pengguna bahwa mereka bisa mendapat manfaat dari pengalaman yang lebih baik seandainya mereka beralih ke sesuatu yang lebih baru
Joe Borg

0

Di sini Anda menemukan browser mana yang sedang berjalan.

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

Kita dapat menggunakan metode util di bawah ini

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);
    };

0
const isChrome = /Chrome/.test(navigator.userAgent)
const isFirefox = /Firefox/.test(navigator.userAgent)

Sayangnya, itu bukan jawaban yang bagus. Edge memiliki Chrome di pesan userAgent-nya. Lebih baik menggunakan !! window.chrome && (!! window.chrome.webstore || !! window.chrome.runtime);
Przemo

-3

Sederhana, satu baris kode JavaScript akan memberi Anda nama browser:

function GetBrowser()
{
    return  navigator ? navigator.userAgent.toLowerCase() : "other";
}

16
UserAgent sendiri tidak cukup memberi tahu kami. Sebagai contoh, agen pengguna saya adalah "Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit / 537.36 (KHTML, seperti Gecko) Chrome / 45.0.2454.85 Safari / 537.36", yang menyebutkan Mozilla, Chrome dan Safari. Jenis browser apa saya?
eremzeit

Maaf tapi saya tidak mendapatkan Anda untuk "Jenis browser apa saya?" apa yang ingin kamu dapatkan?
Nirav Mehta

1
@NiravMehta Yang dia maksud adalah yang navigator.userAgentmemberi tahu Anda setiap browser yang Anda miliki .. Jadi ini benar-benar tidak dapat diandalkan, satu-satunya hal yang akan berhasil adalah jika pengguna hanya memiliki satu browser.
Baldráni

1
ini bukan cara yang dapat diandalkan untuk mendeteksi browser. Beberapa agen pengguna mencakup chrome dan safari, jadi tidak ada cara untuk mendeteksi mana yang harus kita pertimbangkan dan bertahan tetapi, paling tidak, agen pengguna dapat dimodifikasi oleh halaman web.
Juvenik
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.