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

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?

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

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>

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

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/[email protected]/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

• Stack Overflow - Deteksi browser dalam JavaScript?
• Stack Overflow - Bagaimana Anda bisa mendeteksi versi browser?

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

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)

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.

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