On the Internet, most of the browser types are judged by the user agent field. However, this method is unreliable because the user agent can be easily modified.
This method of judgment described below is consistent with“Duck type”Style.
Duck type(English:duck typing)In programming, it is a style of dynamic type. In this style, the effective semantics of an object is determined not by inheriting from a specific class or implementing a specific interface, but by “a collection of current methods and properties.”. “Duck test” can be expressed as follows:
“When you see a bird walk like a duck, swim like a duck, and sing like a duck, then the bird can be called a duck.”
Use this browser detection method only when you really need it, such as displaying browser specific installation extensions.Use feature detection as much as possible。
// 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 = /*@[email protected]*/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;
reliability analysis
Previous methods rely on the properties of the rendering engine(-moz-box-sizing
and -webkit-transform
)To determine the browser type. These prefixes will eventually be discarded. So I switched to a more robust approach – through specific browser features.
- Internet Explorer: conditional compilation of JScript (up to IE9) and
document.documentMode
。 - Edge: in Trident and edge browsers, Microsoft provides
StyleMedia
Constructor - Edge (based on chromium kernel): at the end of user agent, the following values are included:
Edg/[version]
For example:(ex: "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: its API for installing add ons:
InstallTrigger
- Chrome: global objects
chrome
There is one of its attributeschrome.webstore
Object. But in the latest version,chrome.webstore
It will be abandoned. - Safari: by checking the
SafariRemoteNotification
To cover Safari version 3.0 and later. - Opera:
window.opera
It’s been around for many years, but will be obsolete as opera replaces the kernel with blink + V8.In opera 15, the user agent field is more like chrome, but “OPR” is added. In this edition,
chrome
Objects are also defined, but they are notchrome.webstore
。 Since opera started trying to clone chrome, I’ve used the user agent to judge it.!!window.opr && opr.addons
It can still be used to identify opera versions above 20! - Blink: when Google upgraded chrome to version 28,
CSS.supports()
It was introduced into blink. Naturally, the same blink will be used by opera.
Successful Browser Test
- 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