Heim > Web-Frontend > js-Tutorial > Gekapseltes JS bestimmt Betriebssystem- und Browsercode-Sharing_Javascript-Fähigkeiten

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

WBOY
Freigeben: 2016-05-16 16:21:16
Original
1186 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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage