Encapsulated js determines operating system and browser code sharing

Encapsulated js determines operating system and browser code sharing_javascript skills

WBOY

Release： 2016-05-16 16:21:16

Original

1204 people have browsed it

Summary:
For front-end development, our most important task is compatibility, system compatibility, browser compatibility, etc. Today I will share a method that I encapsulated in the project to determine the operating system and browser.

Operating system:

var os = (function() {
  var UserAgent = navigator.userAgent.toLowerCase();
  return {
    isIpad     : /ipad/.test(UserAgent),
    isIphone    : /iphone os/.test(UserAgent),
    isAndroid    : /android/.test(UserAgent),
    isWindowsCe   : /windows ce/.test(UserAgent),
    isWindowsMobile : /windows mobile/.test(UserAgent),
    isWin2K     : /windows nt 5.0/.test(UserAgent),
    isXP      : /windows nt 5.1/.test(UserAgent),
    isVista     : /windows nt 6.0/.test(UserAgent),
    isWin7     : /windows nt 6.1/.test(UserAgent),
    isWin8     : /windows nt 6.2/.test(UserAgent),
    isWin81     : /windows nt 6.3/.test(UserAgent)
  };
}());

Copy after login

If you want to determine whether the system is an iPad, you only need to determine if(os.isIpad) {}.

Browser:

var bw = (function() {
  var UserAgent = navigator.userAgent.toLowerCase();
  return {
    isUc   : /ucweb/.test(UserAgent), // UC浏览器
    isChrome : /chrome/.test(UserAgent.substr(-33,6)), // Chrome浏览器
    isFirefox : /firefox/.test(UserAgent), // 火狐浏览器
    isOpera  : /opera/.test(UserAgent), // Opera浏览器
    isSafire : /safari/.test(UserAgent) && !/chrome/.test(UserAgent), // safire浏览器
    is360   : /360se/.test(UserAgent), // 360浏览器
    isBaidu  : /bidubrowser/.test(UserAgent), // 百度浏览器
    isSougou : /metasr/.test(UserAgent), // 搜狗浏览器
    isIE6   : /msie 6.0/.test(UserAgent), // IE6
    isIE7   : /msie 7.0/.test(UserAgent), // IE7
    isIE8   : /msie 8.0/.test(UserAgent), // IE8
    isIE9   : /msie 9.0/.test(UserAgent), // IE9
    isIE10  : /msie 10.0/.test(UserAgent), // IE10
    isIE11  : /msie 11.0/.test(UserAgent), // IE11
    isLB   : /lbbrowser/.test(UserAgent), // 猎豹浏览器
　　　　 isWX   : /micromessenger/.test(UserAgent), // 微信内置浏览器
    isQQ   : /qqbrowser/.test(UserAgent) // QQ浏览器
  };
}());

Copy after login

]

Summary:
The browsers are all tested by me personally. The one that may have problems is the chrome browser, because most browsers use the WebKit kernel, so I intercepted the navigator of chrome to distinguish it. If the information position of chrome's navigator or the length after chrome changes in the future, problems may easily occur, but it seems to be ok for now.

Now because the mobile UC browser often blocks Baidu ads, but does not block Google ads, we can add in to determine whether it is a UC browser. If it is not, it will display Baidu ads, if it is, it will display Google ads

if(navigator.userAgent.indexOf('UCBrowser') > -1) {
alert("uc浏览器");
}else｛
//不是uc浏览器执行的操作
｝

Copy after login

In fact, some special operations of specific browsers can be done through

JS gets browser information
Browser code name: navigator.appCodeName
Browser name: navigator.appName
Browser version number: navigator.appVersion
Support for Java: navigator.javaEnabled()
MIME types (array): navigator.mimeTypes
System platform: navigator.platform
Plugins (array): navigator.plugins
User agent: navigator.userAgent