Funktionen und UA-Erkennung in JS

Dieses Mal werde ich Ihnen Funktionen und UA-Erkennung in JS vorstellen. Was sind die Vorsichtsmaßnahmen für Funktionen und UA-Erkennung in JS?

Das früheste Browser-Sniffing ist die Erkennung des Benutzeragenten (Benutzeragenten). Der Server (und später der Client) bestimmt den Browsertyp anhand der Zeichenfolge des Benutzeragenten. Während dieser Zeit blockiert der Server basierend auf der User-Agent-Zeichenfolge bestimmte Browser vollständig daran, Website-Inhalte anzuzeigen. Der Browser, der am meisten profitiert hat, ist Netscape Browser. Es lässt sich nicht leugnen, dass Netscape (damals) der leistungsstärkste Browser war, und zwar so sehr, dass viele Websites glaubten, dass nur der Netscape-Browser ihre Webseiten richtig anzeigen würde. Die User-Agent-Zeichenfolge für Netscape Browser ist Mozilla/2.0 (Win95; I). Als der IE zum ersten Mal veröffentlicht wurde, war er grundsätzlich gezwungen, einen großen Teil der User-Agent-Zeichenfolge des Netscape-Browsers zu verwenden, um sicherzustellen, dass der Server den neuen Browser bedienen konnte. Da die meisten Prozesse zur Erkennung von Benutzeragenten nach der Zeichenfolge „Mozilla“ und der Versionsnummer nach dem Schrägstrich suchen, ist die Zeichenfolge des Benutzeragenten von IE-Browser auf Mozilla/2.0 (kompatibel; MSIE 3.0; Windows 95) eingestellt. Glaubst du nicht, dass es ein Dieb ist? IE verwendet einen solchen User-Agent-String, was bedeutet, dass bei jeder Browsertypprüfung auch der neue Browser als Netscapes Navigator-Browser identifiziert wird. Dies führt auch dazu, dass neue Browser den User-Agent-String bestehender Browser teilweise kopieren. Der User-Agent-String der Chrome-Distribution enthält einen Teil des User-Agent-Strings von Safari, der wiederum einen Teil des User-Agent-Strings von Firefox enthält, der wiederum einen Teil des User-Agent-Strings von Netscape enthält.

Die UA-basierte Erkennung ist äußerst unzuverlässig und schwierig zu warten. Ein als Chrome deklarierter Browser kann jedes Mal, wenn ein neuer oder der vorhandene Browser angezeigt wird, gefälscht werden Wenn die Browserversion aktualisiert wird, muss der ursprüngliche Code, der auf der UA-Erkennung basiert, aktualisiert werden. Die Wartungskosten und die Fehlerwahrscheinlichkeit sind extrem hoch

Ich empfehle Ihnen daher, die UA-Erkennung so weit wie möglich zu vermeiden, auch wenn es sein muss Tun Sie dies.

2.8.2 Feature-Erkennung

Wir wollten eine intelligentere Methode (Erkennung) basierend auf Browserbedingungen, daher wurde eine Technologie namens Feature-Erkennung populär. Das Prinzip der Funktionserkennung besteht darin, auf eine bestimmte Browserfunktion zu testen und die Funktionserkennung nur dann anzuwenden, wenn die Funktion vorhanden ist, zum Beispiel:

// 不好的写法if (navigator.userAgent.indexOf("MSIE 7") > -1) { }// 好的写法if (
document
.getElementById) {}

Weil die Funktionserkennung nicht vom verwendeten Browser abhängt, sondern nur davon, ob die Funktion vorhanden ist Daher ist nicht unbedingt eine neue Browserunterstützung erforderlich. Beispielsweise unterstützten in den frühen Tagen von DOM nicht alle Browser document.getElementById(), sodass der Code zum Abrufen eines Elements basierend auf der ID etwas überflüssig schien.

// 好的写法// 仅为举例说明特性检测，现代浏览器都支持getElementByIdfunction getById (id) {  var el = null;  if (document.getElementById) { // DOM
    el = document.getElementById(id);
  } else if (document.all) { // IE
    el = document.all[id];
  } else if (document.layers) { // Netscape <= 4
    el = document.layers[id];
  }  return el;
}

Dieser Ansatz eignet sich auch zur Erkennung der neuesten Browserfunktionen. Browser haben diese neuesten Funktionen experimentell implementiert, während die Spezifikationen noch finalisiert werden. Ein gängiges Polyfill ist eine Anwendung zur Merkmalserkennung, zum Beispiel:

if (!Array.isArray) {  Array.isArray = function (arr) {    return 
Object
.prototype.toString.call(arr) === '[object Array]'
  }
}

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie auf der chinesischen PHP-Website

und andere

verwandte Artikel!

Empfohlene Lektüre:

So vermeiden Sie Nullvergleiche in der Webentwicklung

Lose Kopplung der UI-Ebene in der Webentwicklung

Das obige ist der detaillierte Inhalt vonFunktionen und UA-Erkennung in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!