Gekapseltes JS bestimmt Betriebssystem- und Browsercode-Sharing_Javascript-Fähigkeiten-js-Tutorial-php.cn

Gekapseltes JS bestimmt Betriebssystem- und Browsercode-Sharing_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 16:21:16

Original

1204 Leute haben es durchsucht

Zusammenfassung:
Für die Front-End-Entwicklung ist unsere wichtigste Aufgabe Kompatibilität, Systemkompatibilität, Browserkompatibilität usw. Heute werde ich eine Methode vorstellen, die ich im Projekt gekapselt habe, um das Betriebssystem und den Browser zu bestimmen.

Betriebssystem:

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

Nach dem Login kopieren

Wenn Sie feststellen möchten, ob es sich bei dem System um ein iPad handelt, müssen Sie nur feststellen, ob (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浏览器
  };
}());

Nach dem Login kopieren

]

Zusammenfassung:
Die Browser wurden alle von mir persönlich getestet. Der Chrome-Browser kann Probleme haben, da die meisten Browser den WebKit-Kernel verwenden. Daher habe ich den Browser von Chrome abgefangen, um ihn zu unterscheiden. Wenn sich die Informationsposition des Chrome-Navigators oder die Länge nach Chrome in Zukunft ändert, kann es leicht zu Problemen kommen, aber das scheint vorerst in Ordnung zu sein.

Da der mobile UC-Browser häufig Baidu-Anzeigen blockiert, aber keine Google-Anzeigen, können wir hinzufügen, um festzustellen, ob es sich um einen UC-Browser handelt. Wenn dies nicht der Fall ist, werden Baidu-Anzeigen angezeigt zeigt Google-Anzeigen an

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

Nach dem Login kopieren

Tatsächlich können einige spezielle Vorgänge bestimmter Browser über

ausgeführt werden

JS ruft Browserinformationen ab
Browser-Codename: navigator.appCodeName
Browsername: navigator.appName
Browser-Versionsnummer: navigator.appVersion
Unterstützung für Java: navigator.javaEnabled()
MIME-Typen (Array): navigator.mimeTypes
Systemplattform: navigator.platform
Plugins (Array): navigator.plugins
Benutzeragent: navigator.userAgent