Js encapsulé détermine les compétences de partage de code du système d'exploitation et du navigateur_javascript

Résumé :
Pour le développement front-end, notre tâche la plus importante est la compatibilité, la compatibilité du système, la compatibilité des navigateurs, etc. Aujourd'hui, je vais partager une méthode que j'ai encapsulée dans le projet pour déterminer le système d'exploitation et le navigateur.

Système d'exploitation :

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)
  };
}());

Si vous souhaitez déterminer si le système est un iPad, il vous suffit de déterminer if(os.isIpad) {}.

Navigateur :

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浏览器
  };
}());

]

Résumé :
Les navigateurs sont tous testés par moi personnellement. Celui qui peut avoir des problèmes est le navigateur Chrome, car la plupart des navigateurs utilisent le noyau WebKit, j'ai donc intercepté le navigateur Chrome pour le distinguer. Si la position des informations du navigateur de Chrome ou la longueur après Chrome change à l'avenir, des problèmes peuvent facilement survenir, mais cela semble correct pour le moment.

Maintenant, comme le navigateur UC mobile bloque souvent les publicités Baidu, mais ne bloque pas les publicités Google, nous pouvons l'ajouter pour déterminer s'il s'agit d'un navigateur UC. Si ce n'est pas le cas, il affichera les publicités Baidu, si c'est le cas, il affichera les publicités Baidu. affichera des annonces Google

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

En fait, certaines opérations spéciales de navigateurs spécifiques peuvent être effectuées via

JS obtient les informations du navigateur
Nom de code du navigateur : navigator.appCodeName
Nom du navigateur : navigator.appName
Numéro de version du navigateur : navigator.appVersion
Prise en charge de Java : navigator.javaEnabled()
Types MIME (tableau) : navigator.mimeTypes
Plateforme système : navigator.platform
Plugins (tableau) : navigator.plugins
Agent utilisateur : navigator.userAgent