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

How to forget the root password in Mysql8.0.13 under Windows 10 system

1. First stop the mysql service As an administrat...

MySQL quick recovery solution based on time point

The reason for writing such an article is that on...

Example of using CSS to achieve floating effect when mouse moves over card

principle Set a shadow on the element when hoveri...

A QQ chat room based on vue.js

Table of contents Introduction The following is a...

Implementation of dynamic rem for mobile layout

Dynamic rem 1. First, let’s introduce the current...

Summary of Mysql update multi-table joint update method

Next, I will create two tables and execute a seri...

Simple example of HTML checkbox and radio style beautification

Simple example of HTML checkbox and radio style b...

JS canvas realizes the functions of drawing board and signature board

This article shares the specific code of JS canva...

A nice html printing code supports page turning

ylbtech_html_print HTML print code, support page t...

Conditional comment style writing method and sample code

As front-end engineers, IE must be familiar to us...

Solve the problem of OpenLayers 3 loading vector map source

1. Vector Map Vector graphics use straight lines ...

Introduction to JavaScript array deduplication and flattening functions

Table of contents 1. Array flattening (also known...

Analysis and practice of React server-side rendering principle

Most people have heard of the concept of server-s...