Introduction détaillée à la détection de la prise en charge du navigateur API HTML5

HTML5 s'est développé jusqu'à présent. Bien qu'il n'ait pas été largement popularisé, il est toujours utilisé dans notre vie quotidienne. Dans la vie, il est facile de voir que les jeux, sites Web et applications HTML5 émergent sans cesse. En tant que personnel front-end, vous devriez également en savoir plus sur ces API. pour jeter les bases des futures applications. Ci-dessous, je vais vous présenter la nouvelle API HTML5 et la méthode de détection du navigateur de chaque API, je me réfère principalement aux récents "secrets html5" et à la "programmation avancée html5"

.

Tout d'abord, présentons Modernizr, qui est une Javascript bibliothèque de classes utilisée pour détecter la prise en charge du navigateur pour les fonctionnalités HTML5 et CSS3. 3 (télécharger). La méthode d'utilisation est très simple. Sur la page Après avoir introduit JS, il s'exécutera automatiquement et créera un objet global Modernizr , qui crée un type booléen attribut pour chaque fonctionnalité détectable , il suffit de l'appeler, par exemple :

if( Modernizr.canvas ){  
// 恩，我知道这个属性，他是画图用的：）
}
else{  
// canvas 这是个什么东东？？
}

1. Canvas
Canvas est un canevas bitmap dépendant de la résolution. , et les graphiques qu'il dessine ne peuvent pas zoomer, vous pouvez dessiner n'importe quel graphique sur Canvas via Javascript et même charger des photos. La norme HTML5 a formulé une série d'API Canvas pour dessiner des graphiques simples, définir des chemins, créer des dégradés et appliquer des transformations d'image. Un Canvas est un rectangle de 300 pixels de large et 150 pixels de haut par défaut
Remarque : Les objets dessinés par Canvas n'appartiennent pas à la structure DOM de la page ou à tout autre espace de noms. 2.Audio et vidéo

// 创建一个 Canvas 元素，并检查该元素是否拥有 getContext() 方法，然后用双否定强制返回一个布尔值
var hasCanvas = !!document.createElement("canvas").getContext;
// Modernizr检测方法，返回布尔值
var hasCanvas = Modernizr.canvas ;

L'émergence de ces deux éléments permet aux développeurs de lire de l'audio ou de la vidéo sans utiliser de plug-ins. La spécification HTML5 fournit également une API de contrôle universelle, complète et scriptable

<.>Si vous souhaitez vérifier si le format implicite est supporté, vous pouvez écrire :

La méthode native renverra "probablement", "peut-être" ou "", qui signifie respectivement "complète" " Confiance pour lire ce format", "Il est possible de lire ce format", "Certainement impossible de lire ce format".

// 创建一个 Audio 元素，并检查该元素是否拥有 canPlayType() 方法，然后用双否定强制返回一个布尔值
var hasAudio = !!document.createElement("audio").canPlayType;
// modernizr检测方法
var hasAudio = Modernizr.audio;
// 创建一个 Video 元素，并检查该元素是否拥有 canPlayType() 方法，然后用双否定强制返回一个布尔值
var hasVideo = !!document.createElement("video").canPlayType;
// modernizr检测方法
var hasVideo = Modernizr.video;

Le paramètre passé par la méthode canPlayType() est exprimé en texte pour demander au navigateur s'il peut lire le package ogg La vidéo au format d'encodage "theora" et l'audio au format "vorbis" dans le conteneur

var hasVideo = document.createElement("video").canPlayType('video/ogg; codecs="theora, vorbis"')；
// modernizr检测方法
var hasVideo = Modernizr.video.ogg;

3. Le stockage Web

Le stockage Web (également connu sous le nom de DOMStorage) permet. les développeurs pour stocker les données. Dans les objets Javascript, les objets sont enregistrés lors du chargement de la page et sont facilement accessibles. Les développeurs peuvent choisir d'activer ou non ces données lors de l'ouverture d'une nouvelle fenêtre ou d'un nouvel

onglet

et lors du redémarrage du navigateur. Les données stockées ne seront pas transmises sur le réseau et peuvent sauvegarder des mégadonnées allant jusqu'à plusieurs mégaoctets.
4. Web Workers

Les Web Workers peuvent permettre aux applications Web d'avoir des capacités de traitement en arrière-plan et prennent très bien en charge le multithreading. Par conséquent, les applications Javascript utilisant HTML5 peuvent tirer pleinement parti des processeurs multicœurs et allouer des tâches à long terme aux Web Workers pour exécution.

// 支持的话，全局 window 对象会有一个 localStorage 属性
var hasWebStorage = window.localStorage;
// modernizr检测方法
var hasWebStorage = Modernizr.localstorage;

Remarque : Les scripts exécutés dans Web Workers ne peuvent pas accéder à l'objet fenêtre de la page.

5.Applications Web hors ligne

Le cache d'applications hors ligne de HTML5 permet d'exécuter des applications sans connexion réseau. Lorsque vous visitez pour la première fois un site Web doté de capacités d'accès hors ligne, le serveur Web indique au navigateur quels fichiers sont nécessaires pour assurer un fonctionnement normal hors ligne. Ces fichiers peuvent être n'importe quel fichier HTML, Javascript, images ou vidéos.

// 支持的话，全局 window 对象会有一个 Worker 属性
var hasWorker = window.Worker;
// modernizr检测方法
var hasWorker = Modernizr.webworkers;

6.Géolocalisation

L'API de géolocalisation HTML5 peut localiser où vous vous trouvez dans le monde et partager les informations de localisation avec autorisation. De nombreuses applications intéressantes peuvent être créées avec cette fonctionnalité étonnante. Par exemple, le calcul de la distance de course, les applications sociales basées sur la navigation GPS, etc. Il obtient des données de positionnement via l'adresse IP, la géolocalisation GPS, la géolocalisation Wi-Fi, la géolocalisation du téléphone mobile et la géolocalisation personnalisée.

// 支持的话，全局 window 对象会有一个 applicationCache 属性
var hasApplicationCache = window.applicationCache;
// modernizr检测方法
var hasApplicationCache = Modernizr.applicationcache ;

7. Forms

HTML5 définit de nombreux nouveaux types de zones de saisie : recherche représentant la recherche, numéro de zone de saisie de type numérique, plage de curseur de sélection de plage, couleur du sélecteur de couleur, numéro de téléphone. tél de la zone de saisie, URL de la zone de saisie du site Web, e-mail de la zone de saisie de l'e-mail, date du sélecteur de date, mois de la zone de saisie du mois, semaine de la zone de saisie de la semaine, heure de la zone de saisie de l'horodatage, entrée et heure précises de la zone de saisie et de sortie datetime, zone de saisie de la date et de l'heure locales datetime-local.

// 支持的话，全局 navigator 对象会有一个 geolocation 属性
var hasGeolocation = navigator.geolocation;
// modernizr检测方法
var hasGeolocation = Modernizr.geolocation;

// 创建一个 input 元素，该元素默认是 text 类型，改变他的类型，然后查看改变是否被保留
var o = document.createElement("input");o.setAttribute("type","color");return i.type != "text";
// modernizr检测方法
var hasInputType = Modernizr.inputtypes.color;

8.WebSockets
WebSockets 是 HTML5 中最强大的通信功能，它定义了一个全双工通信通道（又称为双向同时通信，即通信的双方可以同时发送和接受信息的信息交互方式），仅通过 Web 上的一个 Socket 即可进行通信。它不仅仅是对常规 HTTP 通信的另一种增量加强，更代表着一次巨大的进步，对实时的、事件驱动的程序而言更是如此。

// 支持的话，全局 window 对象会有一个 webSocket 属性
var hasWebSocket = window.webSocket;
// modernizr检测方法
var hasWebSocket = Modernizr.websockets;

8.Communication
Communication 是 HTML5 中用来实现正在运行的两个页面之间（iframe、标签页、窗口）进行跨源通信和信息共享的API。它把 postMessage API 定义为发送消息的标准方式。

// 支持的话，全局 window 对象会有一个 postMessage 属性
var hasPostMessage = window.postMessage;
// modernizr检测方法
var hasPostMessage = Modernizr.postmessage;

API 的浏览器支持情况主要介绍这些，以后我会逐个 API 进行详细讲解，把自己学到和研究的东西共享出来，欢迎大家来一块交流学习：）

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!