Fonctionnalités et détection UA ​​dans JS

Cette fois, je vais vous présenter les fonctionnalités et la détection UA ​​en JS. Quelles sont les précautions pour les fonctionnalités et la détection UA ​​en JS Voici un cas pratique, jetons un oeil.

La première détection de navigateur est la détection de l'agent utilisateur (user-agent). Le serveur (et plus tard le client) détermine le type de navigateur en fonction de la chaîne de l'agent utilisateur . Pendant cette période, le serveur empêchera complètement certains navigateurs d'afficher le contenu du site Web en fonction de la chaîne de l'agent utilisateur. Le navigateur qui en a le plus bénéficié est Netscape Browser. Il est indéniable que Netscape (à l'époque) était le navigateur le plus puissant, à tel point que de nombreux sites Web pensaient que seul le navigateur Netscape afficherait correctement leurs pages Web. La chaîne de l'agent utilisateur pour le navigateur Netscape est Mozilla/2.0 (Win95 ; I). Lorsque IE a été publié pour la première fois, il était essentiellement obligé d'utiliser une grande partie de la chaîne de l'agent utilisateur du navigateur Netscape pour garantir que le serveur pouvait servir le nouveau navigateur. Étant donné que la plupart des processus de détection d'agent utilisateur recherchent la chaîne "Mozilla" et le numéro de version après la barre oblique, la chaîne d'agent utilisateur du navigateur IE est définie sur Mozilla/2.0 (compatible ; MSIE 3.0 ; Windows 95) , tu ne penses pas que c'est un voleur ? IE utilise une telle chaîne d'agent utilisateur, ce qui signifie que chaque vérification du type de navigateur identifiera également le nouveau navigateur comme étant le navigateur Navigator de Netscape. Cela donne également tendance aux nouveaux navigateurs de copier partiellement la chaîne de l'agent utilisateur des navigateurs existants. La chaîne d'agent utilisateur de la distribution Chrome contient une partie de la chaîne d'agent utilisateur de Safari, qui à son tour contient une partie de la chaîne d'agent utilisateur de Firefox, qui à son tour contient une partie de la chaîne d'agent utilisateur de Netscape.

La détection basée sur UA est extrêmement peu fiable et difficile à maintenir. Un navigateur déclaré comme Chrome peut être un autre navigateur

Chaque fois qu'un nouveau navigateur apparaît ou que l'existant apparaît. La version du navigateur est mise à niveau, le code original basé sur la détection UA ​​doit être mis à jour et le coût de maintenance et la probabilité d'erreur sont extrêmement élevés

Je vous recommande donc d'éviter autant que possible de détecter UA, même si vous il faut le faire.

2.8.2 Détection de fonctionnalités

Nous voulions disposer d'une méthode (détection) plus intelligente basée sur les conditions du navigateur, c'est pourquoi une technologie appelée détection de fonctionnalités est devenue populaire. Le principe de la détection de fonctionnalités est de tester une fonctionnalité spécifique du navigateur et d'appliquer la détection de fonctionnalités uniquement lorsque la fonctionnalité est présente, par exemple :

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

Parce que la détection de fonctionnalités ne dépend pas du navigateur utilisé, mais uniquement Cela dépend de l'existence ou non de la fonctionnalité, elle ne nécessite donc pas nécessairement la prise en charge d'un nouveau navigateur. Par exemple, au début du DOM, tous les navigateurs ne prenaient pas en charge document.getElementById(), donc le code permettant d'obtenir un élément basé sur l'ID semblait un peu redondant.

// 好的写法// 仅为举例说明特性检测，现代浏览器都支持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;
}

Cette méthode convient également pour détecter les dernières fonctionnalités des navigateurs actuels. Les navigateurs ont implémenté expérimentalement ces dernières fonctionnalités, et les spécifications sont encore en cours de finalisation. Un Polyfill courant est une application de détection de fonctionnalités, par exemple :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez faire attention aux autres. articles connexes sur le site PHP chinois !

Lecture recommandée :

Comment éviter les comparaisons nulles dans le développement Web

Couplage lâche de la couche d'interface utilisateur dans le développement Web

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!