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

Detailed process of upgrading glibc dynamic library in centos 6.9

glibc is the libc library released by gnu, that i...

Sample code for implementing rolling updates of services using Docker Swarm

1. What is Docker Swarm? Docker Swarm is a cluste...

Practical method of deleting a row in a MySql table

First, you need to determine which fields or fiel...

jQuery achieves the shutter effect (using li positioning)

This article shares the specific code of jQuery t...

HTML basic summary recommendation (title)

HTML: Title Heading is defined by tags such as &l...

Alpine Docker image font problem solving operations

1. Run fonts, open the font folder, and find the ...

The whole process record of Vue export Excel function

Table of contents 1. Front-end leading process: 2...

Detailed explanation of JSON.parse and JSON.stringify usage

Table of contents JSON.parse JSON.parse Syntax re...

Analysis and solution of flex layout collapse caused by Chrome 73

Phenomenon There are several nested flex structur...

In-depth explanation of MySQL common index and unique index

Scenario 1. Maintain a citizen system with a fiel...

Linux editing start, stop and restart springboot jar package script example

Preface In the springboot configuration file, the...

JDBC-idea import mysql to connect java jar package (mac)

Preface 1. This article uses MySQL 8.0 version Co...