Home >Web Front-end >JS Tutorial >Encapsulated js determines operating system and browser code sharing_javascript skills
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) }; }());
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浏览器 }; }());
]
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浏览器执行的操作 }
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