JavaScript for Browser Detection

Last updated on 06th April 2016

It is sometimes required to detect the user's browser and run a different script, load a new page etc. Browser detection can be done by checking the browser's userAgent string. But this method is not very reliable, because userAgent strings keep on changing and some browser manufacturers deliberately make them confusing to avoid detection. For example, Internet Explorer used to have "MSIE" in the userAgent string, but it was dropped in IE11.

The most reliable and accurate method is feature-based detection ie., check the browser capabilities, features that are unique to a browser.

Browsers & Feature Detection

There are several different strategies for implementing feature based browser detection. The basic idea is to check for an object or property that is unique to a browser and promptly separating it from other browser. Here is an example for browser sniffing some of the most popular browsers:

Internet Explorer

For IE detection, the document.documentMode property can be used. For Internet Explorer it is an integer related to version and it will be undefined for other browsers. In addition JavaScript's conditional compilation can also be checked. The @cc_on statement activates conditional compilation within comments for IE10 and lower, and is ignored by others.

Chrome

For Chrome you can check two objects, window.chrome and window.chrome.webstore

Firefox

For Firefox detection, the InstallTrigger API can be checked. This is Firefox's API to install add-ons and undefined for other browsers.

Opera

Opera tries to closely resemble Chrome, but you can use window.opr and opr.addons for Opera 20+. For previous versions, window.opera and userAgent sniffing can be used.

Edge

Edge can be detected by StyleMedia constructor

Safari

Safari can be detected by the naming pattern of its constructors.

Implementation

Below is a sample code that implements the strategy described

	
<script type="text/javascript">

    var browserName;

    // Opera 8.0+
    if ((window.opr && opr.addons) || window.opera || (navigator.userAgent.indexOf(' OPR/') >= 0))
	browserName = "Opera";
	
    // Firefox 1.0+
    if (typeof InstallTrigger !== 'undefined')
	browserName = "Firefox";
	
    // At least Safari 3+: "[object HTMLElementConstructor]"
    if (Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0)
	browserName = "Safari";
	
    // Internet Explorer 6-11
    if ((/*@cc_on!@*/false) || (document.documentMode))
	browserName = "IE";
	
    // Edge 20+
    if (!(document.documentMode) && window.StyleMedia)
	browserName = "Edge";
	
    // Chrome 1+
    if (window.chrome && window.chrome.webstore)
	browserName = "Chrome";

    document.body.innerHTML = browserName + ' browser detected' + '<br>';

</script>