0

I am trying to detect browser that is used by application. This is the code which I am executing.

function checkBrowserType(){
var ua =navigator.userAgent;

alert("browser details ==> " +ua);

}

The strange thing is in various screens I am getting different user agent details. When I try in IE11 one screen it shows

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; Touch; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; Tablet PC 2.0; wbx 1.0.0)

Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; Touch; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; Tablet PC 2.0; wbx 1.0.0; rv:11.0) like Gecko

The first one looks fine for me as it gives MSIE search as 25. In that case I can assume the user is using IE. But the the second one says Mozilla/5.0 and 'MSIE' search gives -1 though I am trying in IE. I am not sure what is the real issue with my code. Any one please help me to resolve this.

1 Answer 1

1

I am trying to detect browser that is used by application.

Don't do that.

As you can see using the navigator.userAgent is an unreliable way to find out what browser someone has and it can easily be spoofed by the client as well.

Instead, ask yourself "why" you really want to know what browser someone has and do "feature detection", not "browser detection".

Feature detection is where we test to see if the client supports some functionality that we'd like to use. Since there are clients that have proprietary APIs, knowing if you can call a particular API is really what you want to know.

Here's a classic example. Microsoft Internet Explorer didn't start supporting the W3C DOM standard of .addEventListener() until version 9. Back when IE8 was still used quite a bit, we'd have to know if we should be using the new standard or the old proprietary API of .attachEvent. Here's what we did:

let div = document.querySelector("div"); // Get the element

// Detect whether that element supports addEventListener...
// If it does, then that object property will return a native function (something)
// If it doesn't, then that object property won't exist and we'll get `undefined` (nothing)
if(div.addEventListener){
  console.log("W3C DOM Event API Supported... Setting up event with standard API");
  div.addEventListener("click", function(){
    alert("Thanks!");
  });
} else {
  console.log("Proprietary API Supported... Setting up event with proprietary API");
  div.attachEvent("click", function(){
    alert("Get a new browser!");
  });
}
<div>Click me</div>

4
  • some of the things won't work in other browsers. So this is a temperory set up till we resolve the issues and make compatible with other browsers.
    – JAVA_CAT
    Mar 15, 2019 at 10:39
  • @JAVA_CAT Right. And, we use feature detection to detect if the things we are trying to do will work and if not, we use other means. See my updated answer. Mar 15, 2019 at 10:42
  • In my case I just want user to show a messsage in case they are using a browser other than IE. As I mentioned above my code navigator.userAgent.search("MSIE"); returns -1 if I use IE and that is causing this issue. The only way I can solve the issue is make the code compatible with all the browser. For quick fix done is just to show a message to all user who all logged in the system irrespective of the browser.
    – JAVA_CAT
    Mar 15, 2019 at 15:14
  • I'm not sure how to say this any differently. This is a textbook reason to use feature detection, not browser detection. If you test for a feature that only IE has, then you'll know for a fact that the browser is some form of IE or not. User Agent strings are not reliable indicators of the actual browser someone is using. Mar 15, 2019 at 20:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.