วิธีการตรวจสอบเบราว์เซอร์ Safari, Chrome, IE, Firefox และ Opera?

ฉันมี 5 addons / ส่วนขยายสำหรับ FF, Chrome, IE, Opera และ Safari

ฉันจะจดจำเบราว์เซอร์ผู้ใช้และเปลี่ยนเส้นทาง (เมื่อมีการคลิกปุ่มติดตั้ง) เพื่อดาวน์โหลด addon ที่เกี่ยวข้องได้อย่างไร

Googling สำหรับการตรวจหาเบราว์เซอร์ที่เชื่อถือได้มักส่งผลให้ตรวจสอบสตริงตัวแทนผู้ใช้ วิธีนี้ไม่น่าเชื่อถือเพราะมันเป็นการหลอกลวงค่านี้
ผมเคยเขียนวิธีการในการตรวจสอบเบราว์เซอร์โดยเป็ดพิมพ์

ใช้วิธีตรวจจับเบราว์เซอร์เฉพาะเมื่อจำเป็นเท่านั้นเช่นแสดงคำแนะนำเฉพาะเบราว์เซอร์เพื่อติดตั้งส่วนขยาย ใช้การตรวจจับคุณสมบัติเมื่อเป็นไปได้

การสาธิต: 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สร้าง การยกเว้นตรีศูลทำให้เรามีความได้เปรียบ
• Edge (ขึ้นอยู่กับโครเมียม): เอเจนต์ผู้ใช้รวมค่า "Edg / [version]" ในตอนท้าย (เช่น: "Mozilla / 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit / 537.36 (KHTML เช่น Gecko) Chrome / 80.0.3987.16 Safari / 537.36 Edg / 80.0.361.9 ")
• Firefox: API ของ Firefox เพื่อติดตั้งส่วนเสริม: InstallTrigger
• Chrome: chromeวัตถุทั่วโลกที่มีคุณสมบัติหลายประการรวมถึงchrome.webstoreวัตถุที่มีเอกสาร
• การอัพเดต 3 chrome.webstoreเลิกใช้แล้วและไม่ได้กำหนดในเวอร์ชันล่าสุด
• Safari: รูปแบบการตั้งชื่อที่ไม่เหมือนใครในการตั้งชื่อคอนสตรัคเตอร์ นี่เป็นวิธีที่คงทนน้อยที่สุดสำหรับคุณสมบัติทั้งหมดที่ระบุไว้และเดาว่าอะไร ใน Safari 9.1.3 ได้รับการแก้ไข ดังนั้นเรากำลังตรวจสอบกับSafariRemoteNotificationซึ่งเปิดตัวหลังจากเวอร์ชัน 7.1 เพื่อครอบคลุม Safaris ทั้งหมดตั้งแต่ 3.0 ขึ้นไป
• Opera: window.operaมีมานานหลายปี แต่จะลดลงเมื่อ Opera แทนที่เครื่องยนต์ด้วย Blink + V8 (ใช้โดย Chromium)
• อัปเดต 1: มีการเผยแพร่ Opera 15สตริง UA ของมันจะดูเหมือน Chrome แต่ด้วยการเพิ่ม "OPR" ในรุ่นนี้chromeมีการกำหนดวัตถุ (แต่chrome.webstoreไม่ใช่) เนื่องจาก Opera พยายามอย่างหนักที่จะโคลน Chrome ฉันจึงใช้ตัวแทนผู้ใช้ในการดมกลิ่นเพื่อจุดประสงค์นี้
• อัปเดต 2: !!window.opr && opr.addonsสามารถใช้เพื่อตรวจจับOpera 20+ (เอเวอร์กรีน)
• Blink: CSS.supports() เปิดตัวใน Blinkเมื่อ Google เปิด Chrome 28 แน่นอนว่า Blink แบบเดียวกับที่ใช้ใน Opera

ทดสอบสำเร็จแล้วใน:

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

อัปเดตเมื่อพฤศจิกายน 2559 เพื่อรวมการตรวจจับของเบราว์เซอร์ Safari ตั้งแต่ 9.1.3 ขึ้นไป

อัปเดตในเดือนสิงหาคม 2018 เพื่ออัปเดตการทดสอบที่ประสบความสำเร็จล่าสุดเกี่ยวกับ chrome, firefox IE และ edge

อัปเดตในเดือนมกราคม 2019 เพื่อแก้ไขการตรวจจับโครเมี่ยม (เนื่องจากการคัดค้าน window.chrome.webstore) และรวมถึงการทดสอบที่ประสบความสำเร็จล่าสุดเกี่ยวกับโครเมี่ยม

อัปเดตในเดือนธันวาคม 2019 เพื่อเพิ่ม Edge ตามการตรวจจับ Chromium (ตามความคิดเห็น @Nimesh)

คุณสามารถลองวิธีต่อไปนี้เพื่อตรวจสอบเวอร์ชั่นของเบราว์เซอร์

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

ฉันรู้ว่ามันเกินจะใช้ lib สำหรับสิ่งนั้น แต่เพียงเพื่อเพิ่มด้ายคุณสามารถตรวจสอบis.jsวิธีการทำเช่นนี้:

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

ต่อไปนี้เป็นห้องสมุดที่โดดเด่นหลายแห่งที่จัดการการตรวจหาเบราว์เซอร์ตั้งแต่ธันวาคม 2562

Bowserโดย lancedikson - 4,065 ★ s - อัพเดทล่าสุด 2 ต.ค. 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>

* รองรับ Edge ตาม Chromium

Platform.jsโดย bestiejs - 2,550 ★ s - อัปเดตล่าสุด 14 เม.ย. 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โดย gabceb - 504 ★ s - อัปเดตล่าสุด 23 พฤศจิกายน 2558 - 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 (เก็บถาวร)โดย darcyclarke - 522 ★ s - อัปเดตล่าสุด 26 ต.ค. 2558 - 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>

Browser Detect (เก็บถาวร)โดย QuirksMode - อัปเดตล่าสุด 14 พ.ย. 2556 - 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 ★ s - อัปเดตล่าสุด 2 ต.ค. 2561
• Modernizr - 23,397 ★ s - อัพเดท 12 มกราคม 2019 ล่าสุด - จะเลี้ยงม้าเลี้ยง, ตรวจสอบคุณสมบัติควรขับรถใด ๆcanIuseคำถามสไตล์ การตรวจจับเบราว์เซอร์เป็นเพียงการให้ภาพที่กำหนดเองดาวน์โหลดไฟล์หรือคำแนะนำสำหรับเบราว์เซอร์แต่ละตัว

อ่านเพิ่มเติม

• Stack Overflow - การตรวจจับเบราว์เซอร์ใน JavaScript?
• Stack Overflow - คุณจะตรวจสอบเวอร์ชั่นของเบราว์เซอร์ได้อย่างไร?

ในกรณีที่ทุกคนพบว่ามีประโยชน์นี้ฉันได้ทำคำตอบของ 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());

ชุดสั้น

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)

ต่อไปนี้เป็นคำตอบของ Rob ที่ปรับปรุงแล้วในปี 2559 รวมถึง Microsoft Edge และการตรวจจับการกะพริบของ:

( แก้ไข : ฉันอัปเดตคำตอบของ 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

คุณสามารถใช้tryและcatchใช้ข้อความข้อผิดพลาดเบราว์เซอร์ที่แตกต่างกัน IE และ edge ผสมกัน แต่ฉันใช้การพิมพ์เป็ดจาก 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;
        }
    }
};

ขอบคุณทุกคน. ฉันทดสอบตัวอย่างโค้ดที่นี่ในเบราว์เซอร์ล่าสุด: 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 ด้วยชื่อของเบราว์เซอร์

ไม่มีความคิดว่ามันจะมีประโยชน์กับทุกคน แต่นี่เป็นตัวแปรที่ทำให้ 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';
}

}

การตรวจจับเบราว์เซอร์บนเดสก์ท็อปและมือถือ: 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

นอกจากนี้ยังมีวิธี "แฮ็ก" น้อยกว่าซึ่งใช้ได้กับเบราว์เซอร์ยอดนิยมทั้งหมด Google ได้รวมถึงเบราว์เซอร์ในการตรวจสอบของพวกเขาห้องสมุดปิด โดยเฉพาะอย่างยิ่งมีลักษณะที่และgoog.userAgent goog.userAgent.productด้วยวิธีนี้คุณจะได้รับข้อมูลล่าสุดหากมีการเปลี่ยนแปลงบางอย่างในลักษณะที่เบราว์เซอร์แสดงตน (เนื่องจากคุณเรียกใช้คอมไพเลอร์ตัวปิดเวอร์ชันล่าสุดเสมอ)

หากคุณจำเป็นต้องรู้ว่าเบราว์เซอร์รุ่นใดรุ่นหนึ่งเป็นตัวเลขคุณสามารถใช้ข้อมูลโค้ดต่อไปนี้ ขณะนี้มันจะบอกเวอร์ชันของ Chrome / Chromium / Firefox ให้คุณทราบ:

var match = $window.navigator.userAgent.match(/(?:Chrom(?:e|ium)|Firefox)\/([0-9]+)\./);
var ver = match ? parseInt(match[1], 10) : 0;

UAParserเป็นหนึ่งในไลบรารี่ JavaScript ที่มีน้ำหนักเบาเพื่อระบุเบราว์เซอร์, เครื่องยนต์, OS, CPU และประเภท / รุ่นอุปกรณ์จากสตริง userAgent

มี 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เพื่อเขียนโปรแกรมเพจของคุณแบบมีเงื่อนไข

ที่มาการสอน: วิธีการตรวจสอบเบราว์เซอร์, เครื่องยนต์, ระบบปฏิบัติการ, CPU และอุปกรณ์โดยใช้ JavaScript?

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

นี่เป็นการรวมคำตอบดั้งเดิมของ Rob และการอัพเดทของ Pilau สำหรับปี 2559

    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;

ที่นี่คุณจะพบว่าเบราว์เซอร์ใดกำลังทำงานอยู่

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


        }

เราสามารถใช้วิธีการด้านล่าง 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);
    };

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

รหัส JavaScript บรรทัดเดียวที่เรียบง่ายจะให้ชื่อเบราว์เซอร์ของคุณ:

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