Use JavaScript to detect browsers

Use JavaScript to detect browsers

If you really need to check the browser type, it is easy to implement it using JavaScript.

View Demo

Download Source from GitHub

JavaScript has a standard navigator object that contains information about browser usage.

The navigator object consists of many attributes, but the userAgent Attribute-a string contains the browser, operating system, and all other information we need.

To displaynavigator.userAgentYou only need to select the following method:

Alert

// Display in an alert boxalert(navigator.userAgent);

Navigator. userAgent value of Firefox 30 on win7. <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + PGJyPgo8L3A + fill = "brush: java;"> // Write it in the HTML documentdocument. write (navigator. userAgent );
Console. log

// Display it in the browser's developer tool// This is ideal// Use console.log() when you're developing/experimenting JavaScriptconsole.log(navigator.userAgent);

For IE11, the output is as follows:

Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MASM; .NET4.0C; .NET4.0E; rv:11.0) like Gecko

As you can see, the problem with using userAgent. navigator is that it is a long string with poor readability.

So, if I want to get the desired information or show it to the user, I first want to parse this string. The problem is that I am powerless to use regular expressions (in other aspects), so I am happy to use the Detect. js JavaScript library written by Darcy Clarke.

Detect. js parses a string into a readable and operable JavaScript Object. To display the name, version, and operating system of the browser, see the following code:

// Create 'user' object that will contain Detect.js stuff// Call detect.parse() with navigator.userAgent as the argumentvar user = detect.parse(navigator.userAgent);// Display some property values in my browser's dev tools consoleconsole.log(  user.browser.family  user.browser.version  user.os.name);

In Firebug, you will see:

Firefox 30 Windows 7

The result of Google developer tools on the same machine is:

Chrome 35 Windows 7

You can use conditional statements to target a specific browser. For example, you only want

if (user.browser.family === 'Safari') {  alert('You\'re using the Safari browser');   }

All resolved attribute tables:

Note: If the attribute cannot be parsed, its value is null or undefined. If you want to show this information to your users, you should make a condition judgment for places where null or undefined values may occur.