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

May 16, 2016 pm 04:21 PM
js 操作系统 浏览器

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

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Zwei -Punkte -Museum: Alle Exponate und wo man sie finden kann
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Die Breite der EMSP -Räume in HTML ist inkonsistent. Wie kann ich eine zuverlässige Texteinrückung implementieren? Die Breite der EMSP -Räume in HTML ist inkonsistent. Wie kann ich eine zuverlässige Texteinrückung implementieren? Apr 04, 2025 pm 11:57 PM

In Bezug auf das Problem der inkonsistenten Breite von EMSP -Räumen in HTML- und chinesischen Charakteren in vielen Web -Tutorials wird erwähnt, dass die Breite eines chinesischen Charakters, aber die tatsächliche Situation nicht ...

Wie kann man Lückeneffekt auf das Karten- und Gutscheinlayout mit Gradientenhintergrund erzielen? Wie kann man Lückeneffekt auf das Karten- und Gutscheinlayout mit Gradientenhintergrund erzielen? Apr 05, 2025 am 07:48 AM

Erkennen Sie den Lückeneffekt des Karten -Gutschein -Layouts. Beim Entwerfen von Karten -Gutschein -Layout begegnen Sie häufig die Notwendigkeit, Lücken zu Karten -Gutscheinen hinzuzufügen, insbesondere wenn der Hintergrund Gradient ist ...

Wie verwendet ich das Clip-Pfad-Attribut von CSS, um den 45-Grad-Kurveneffekt des Segmenters zu erreichen? Wie verwendet ich das Clip-Pfad-Attribut von CSS, um den 45-Grad-Kurveneffekt des Segmenters zu erreichen? Apr 04, 2025 pm 11:45 PM

Wie kann man den 45-Grad-Kurveneffekt des Segmenters erreichen? Bei der Implementierung des Segmenters verwandeln Sie den rechten Rand in eine 45-Grad-Kurve, wenn Sie auf die linke Schaltfläche klicken, und der Punkt ...

Wie wähle und style ich Elemente der ersten spezifischen Klasse mit CSS und JavaScript? Wie wähle und style ich Elemente der ersten spezifischen Klasse mit CSS und JavaScript? Apr 04, 2025 pm 11:33 PM

Wie wähle und style ich Elemente der ersten spezifischen Klasse mit CSS und JavaScript? In der Webentwicklung begegnen Sie häufig auf die Notwendigkeit, bestimmte Klassen auszuwählen und zu ändern ...

Können Sie Tauri verwenden, um Desktop -Anwendungen zu entwickeln, wenn Sie Rost nicht kennen? Können Sie Tauri verwenden, um Desktop -Anwendungen zu entwickeln, wenn Sie Rost nicht kennen? Apr 04, 2025 pm 11:42 PM

Die Auswirkungen der Rost -Sprachkenntnisse auf die Desktop -Programmentwicklung im Rahmen des Tauri Framework Tauri ist ein Desktop -Anwendungsentwicklungsrahmen, das mit Rost erstellt wurde, dank des leichten und ...

Wie kann man den Gradienteneffekt von CSS -Schriftarten erreichen? Wie kann man den Gradienteneffekt von CSS -Schriftarten erreichen? Apr 04, 2025 pm 10:12 PM

Implementierung des CSS -Schriftart -Gradienteneffekts Viele Entwickler hoffen, einen coolen Schriftgradienteneffekt auf Webseiten zu erzielen. In diesem Artikel wird ausführlich erläutert, wie CSS3 verwendet wird, um die Grafik zu implementieren ...

Wie unterscheidet ich zwischen dem Schließen eines Browser -Registerkartens und dem Schließen des gesamten Browsers mit JavaScript? Wie unterscheidet ich zwischen dem Schließen eines Browser -Registerkartens und dem Schließen des gesamten Browsers mit JavaScript? Apr 04, 2025 pm 10:21 PM

Wie unterscheidet ich zwischen den Registerkarten und dem Schließen des gesamten Browsers mit JavaScript in Ihrem Browser? Während der täglichen Verwendung des Browsers können Benutzer ...

VUE2 -Projekt Online Iframe White Screen: Wie kann man es beheben und lösen? VUE2 -Projekt Online Iframe White Screen: Wie kann man es beheben und lösen? Apr 05, 2025 am 06:21 AM

Fehlerbehebung und Lösung des Online -Iframe -Online -Iframe -Projekts im VUE2 -Projekt. Bei der Entwicklung des VUE2 -Projekts verwenden wir häufig IFrames, um andere Webinhalte einzubetten. Allerdings der Artikel ...

See all articles