What is the correct way to detect new Microsoft Ed

2020-07-22 18:38发布

问题:

As latest version of Microsoft Edge is out and uses Blink - what is the correct way to differentiate Old Edge from New Edge one with javascript?

Currently I plan to look into navigator.userAgent to check for older versions of Edge (up to 18)

const isOldEdge = /edge\/([0-1][0-8]|[0-9]\D)/.test(navigator.userAgent.toLowerCase());

Is this correct way to detect it?

回答1:

I suggest you use window.navigator userAgent to check whether the browser is Microsoft Chromium Edge or MS edge (EdgeHtml).

The Edge (EdgeHtml) browser userAgent:

mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/70.0.3538.102 safari/537.36 edge/18.18362

The Microsoft Chromium Edge userAgent:

mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/80.0.3987.87 safari/537.36 edg/80.0.361.50

Sample code:

<!doctype html>
<html>
<head>
<title>Test demo</title>
</head>
<body>
<script>
    var browser = (function (agent) {
        switch (true) {
            case agent.indexOf("edge") > -1: return "MS Edge (EdgeHtml)";
            case agent.indexOf("edg") > -1: return "MS Edge Chromium";
            case agent.indexOf("opr") > -1 && !!window.opr: return "opera";
            case agent.indexOf("chrome") > -1 && !!window.chrome: return "chrome";
            case agent.indexOf("trident") > -1: return "Internet Explorer";
            case agent.indexOf("firefox") > -1: return "firefox";
            case agent.indexOf("safari") > -1: return "safari";
            default: return "other";
        }
    })(window.navigator.userAgent.toLowerCase());
    document.body.innerHTML =  "This is " + browser + " browser." + "<br><br>" + window.navigator.userAgent.toLowerCase();
</script>
</body>
</html>

Output in MS edge (EdgeHtml) browser:

Output in MS edge Chromium browser:

Reference:

How to detect Microsoft Chromium Edge (chredge , edgium) in Javascript