{"id":169,"date":"2006-02-02T16:01:09","date_gmt":"2006-02-02T14:01:09","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/archives\/2006\/02\/02\/why-browser-detection-is-a-bad-habit\/"},"modified":"2006-03-29T18:54:14","modified_gmt":"2006-03-29T16:54:14","slug":"why-browser-detection-is-a-bad-habit","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2006\/02\/02\/why-browser-detection-is-a-bad-habit\/","title":{"rendered":"Why browser detection with JavaScript is a bad habit?"},"content":{"rendered":"

What\u2019s wrong with this JavaScript function?<\/p>\n

var xmlHttp = function(){\r\n    var r = null;\r\n    var browser = navigator.appName;\r\n    if(browser == 'Microsoft Internet Explorer'){\r\n        r = new ActiveXObject('Microsoft.XMLHTTP');\r\n    } else {\r\n        r = new XMLHttpRequest();\r\n    };\r\n    return r;\r\n};<\/pre>\n
You don\u2019t have a clue? Then this is the right article for you… (well except you don\u2019t know why are you reading this in the first place) <\/p>\n
Let\u2019s say you run this script in Opera<\/a>. Opera is by default declaring its\u2019 navigator.appName<\/code> as Microsoft Internet Explorer<\/code> (open the W3schools TryIt Editor<\/a> in your default Opera installation).<\/p>\n
In case of Opera, the first condition would match, but the trouble is – Opera doesn\u2019t support ActiveXObject<\/code> object and it will throw you an error. Furthermore, if a browser is not Microsoft Internet Explorer and it doesn\u2019t support XMLHttpRequest<\/code>, the browser will also hang.<\/p>\n
In the above example the function detects browser version, instead of its\u2019 support for a method at hand. On the other hand, if you test for a method and the browser fails, it will simply skip to a next check. The correct approach for the above example would be:<\/p>\n
var xmlHttp = function() {\r\n    var r = null;\r\n    if (window.XMLHttpRequest) {\r\n        r = new XMLHttpRequest();\r\n    } else if(window.ActiveXObject) {\r\n        var msp = new Array('Msxml2.XMLHTTP','Microsoft.XMLHTTP');\r\n        for (var i = 0; i < msp.length; i = i + 1) {\r\n            try { r = new ActiveXObject(msp[i]); } catch (e){};\r\n        };\r\n    };\r\n    return r;\r\n};<\/pre>\n
Right?<\/p>\n","protected":false},"excerpt":{"rendered":"
You’ve been told not to do that<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/169"}],"collection":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=169"}],"version-history":[{"count":0,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/169\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=169"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}