JavaScript navigator.userAgent obtains browser information case explanation

JavaScript navigator.userAgent obtains browser information case explanation

The browser is probably the most familiar tool for us. In addition to the well-known browsers Firefox, Opera, Safari, IE, and Chrome, it is said that there are nearly a hundred browsers in the world. Usually when developing, it is necessary to be compatible with various browsers, so it is important to refine the judgment of browser type and system.

Let’s first take a look at what User-Agent is? User-Agent is the user identifier in the HTTP request, which usually sends a string that can represent the client type, such as browser type, operating system and other information. The agreed format of User-Agent is: application name, followed by a slash, followed by the version number, and the rest is in free format.

Here I only show a few browsers

Chrome

Safari for iPhone

IE

Next, we encapsulate the function of obtaining the browsing type and system, and then call it where needed.

// All major browsers function getBrowser() {
    var u = navigator.userAgent;
 
    var bws = [{
        name: 'sgssapp',
        it: /sogousearch/i.test(u)
    }, {
        name: 'wechat',
        it: /MicroMessenger/i.test(u)
    }, {
        name: 'weibo',
        it: !!u.match(/Weibo/i)
    }, {
        name: 'uc',
        it: !!u.match(/UCBrowser/i) || u.indexOf(' UBrowser') > -1
    }, {
        name: 'sogou',
        it: u.indexOf('MetaSr') > -1 || u.indexOf('Sogou') > -1
    }, {
        name: 'xiaomi',
        it: u.indexOf('MiuiBrowser') > -1
    }, {
        name: 'baidu',
        it: u.indexOf('Baidu') > -1 || u.indexOf('BIDUBrowser') > -1
    }, {
        name: '360',
        it: u.indexOf('360EE') > -1 || u.indexOf('360SE') > -1
    }, {
        name: '2345',
        it: u.indexOf('2345Explorer') > -1
    }, {
        name: 'edge',
        it: u.indexOf('Edge') > -1
    }, {
        name: 'ie11',
        it: u.indexOf('Trident') > -1 && u.indexOf('rv:11.0') > -1
    }, {
        name: 'ie',
        it: u.indexOf('compatible') > -1 && u.indexOf('MSIE') > -1
    }, {
        name: 'firefox',
        it: u.indexOf('Firefox') > -1
    }, {
        name: 'safari',
        it: u.indexOf('Safari') > -1 && u.indexOf('Chrome') === -1
    }, {
        name: 'qqbrowser',
        it: u.indexOf('MQQBrowser') > -1 && u.indexOf(' QQ') === -1
    }, {
        name: 'qq',
        it: u.indexOf('QQ') > -1
    }, {
        name: 'chrome',
        it: u.indexOf('Chrome') > -1 || u.indexOf('CriOS') > -1
    }, {
        name: 'opera',
        it: u.indexOf('Opera') > -1 || u.indexOf('OPR') > -1
    }];
 
    for (var i = 0; i < bws.length; i++) {
        if (bws[i].it) {
            return bws[i].name;
        }
    }
 
    return 'other';
}
 
// System differentiation function getOS() {
    var u = navigator.userAgent;
    if (!!u.match(/compatible/i) || u.match(/Windows/i)) {
        return 'windows';
    } else if (!!u.match(/Macintosh/i) || u.match(/MacIntel/i)) {
        return 'macOS';
    } else if (!!u.match(/iphone/i) || u.match(/Ipad/i)) {
        return 'ios';
    } else if (!!u.match(/android/i)) {
        return 'android';
    } else {
        return 'other';
    }
}

This is the end of this article about the case study of JavaScript navigator.userAgent obtaining browser information. For more relevant content about JavaScript navigator.userAgent obtaining browser information, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Detailed explanation of JavaScript BOM composition and common events
  • Detailed explanation of BOM and DOM in JavaScript
  • JavaScript history object explained
  • Principle analysis of javascript History object
  • Use JS location to implement search box history function
  • JavaScript BOM location object + navigator object + history object

<<:  Detailed explanation of ensuring the consistency of MySQL views (with check option)

>>:  Solution to nginx-ingress-controller log persistence solution

Recommend

Example of using Dockerfile to build an nginx image

Introduction to Dockerfile Docker can automatical...

MySQL series multi-table join query 92 and 99 syntax examples detailed tutorial

Table of contents 1. Cartesian product phenomenon...

MySQL integrity constraints definition and example tutorial

Table of contents Integrity constraints Definitio...

How to use jsonp in vue

Table of contents 1. Introduction 2. Installation...

Why TypeScript's Enum is problematic

Table of contents What happened? When to use Cont...

Let IE6, IE7, IE8 support CSS3 rounded corners and shadow styles

I want to make a page using CSS3 rounded corners ...

How to add sudo permissions to a user in Linux environment

sudo configuration file The default configuration...

CSS optimization skills self-practice experience

1. Use css sprites. The advantage is that the smal...

The magic of tbody tag speeds up the display of table content

You must have saved other people’s web pages and l...

Core skills that web front-end development engineers need to master

The content involved in Web front-end development...

Linux gzip command compression file implementation principle and code examples

gzip is a command often used in Linux systems to ...

Example of how to quickly build a LEMP environment with Docker

LEMP (Linux + Nginx + MySQL + PHP) is basically a...

js to write the carousel effect

This article shares the specific code of js to ac...

JS realizes the calculation of the total price of goods in the shopping cart

JS calculates the total price of goods in the sho...