Detaillierte Einführung in die Erkennung der HTML5-API-Browserunterstützung

HTML5 hat sich bis heute weiterentwickelt. Obwohl es nicht weit verbreitet ist, ist es Es ist immer noch in unserem täglichen Leben zu sehen, dass HTML5-Spiele, Websites und Anwendungen immer häufiger auftauchen. Als Front-End-Mitarbeiter sollten Sie auch mehr über diese APIs wissen Im Folgenden werde ich Ihnen die neue HTML5-API und die Browser-Erkennungsmethode jeder API vorstellen. Ich beziehe mich hauptsächlich auf die aktuellen „HTML5-Geheimnisse“ und „HTML5-Erweiterte-Programmierung“

Lassen Sie uns zunächst Modernizr vorstellen, eine Open-Source-Javascript Klassenbibliothek, die zur Erkennung der Browserunterstützung für HTML5- und CSS3-Funktionen verwendet wird (Herunterladen). Auf der Seite wird JS automatisch ausgeführt und ein globales -Objekt erstellt, das einen entsprechenden booleschen Typ Attribut für jedes erkennbare Merkmal , wir müssen es nur nennen, zum Beispiel:

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

1 CanvasCanvas ist eine auflösungsabhängige Bitmap-Leinwand. und die gezeichneten Grafiken können nicht gezoomt werden, Sie können über Javascript beliebige Grafiken auf Canvas zeichnen und sogar Fotos laden. Der HTML5-Standard hat eine Reihe von Canvas-APIs zum Zeichnen einfacher Grafiken, zum Definieren von Pfaden, zum Erstellen von Farbverläufen und zum Anwenden von Bildtransformationen formuliert Canvas ist ein Rechteck, standardmäßig 300 Pixel breit und 150 Pixel hoch.
Hinweis: Die von Canvas gezeichneten Objekte gehören nicht zur Seiten-DOM-Struktur oder einem anderen
Namespace2 .Audio und Video

Das Aufkommen dieser beiden Elemente ermöglicht es Entwicklern, Audio oder Video ohne Verwendung von Plug-Ins abzuspielen.

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

Wenn Sie überprüfen möchten, ob das implizite Format unterstützt wird, können Sie schreiben:

Die native Methode gibt „wahrscheinlich“, „vielleicht“ oder „“ zurück, was jeweils „vollständig“ bedeutet. Vertrauen, dieses Format abzuspielen“, „Dieses Format kann abgespielt werden“, „Dieses Format kann definitiv nicht abgespielt werden“.

// 创建一个 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;

Die von der Methode canPlayType() übergebenen Parameter werden in Text ausgedrückt, um den Browser zu fragen, ob dies möglich ist Spielen Sie das ogg-Paket ab. Video im „Theora“-Codierungsformat und Audio im „Vorbis“-Format innerhalb des Containers

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

3. Web Storage (auch als DOMStorage bekannt) ermöglicht Entwickler zum Speichern von Daten. Objekte werden beim Laden der Seite gespeichert und sind leicht zugänglich. Entwickler können wählen, ob diese Daten beim Öffnen eines neuen Fensters oder neuen

Tabs
und beim Neustart des Browsers aktiviert werden sollen. Die gespeicherten Daten werden nicht über das Netzwerk übertragen und können große Datenmengen von bis zu mehreren Megabyte speichern.

4. Web Worker
Web Worker können Webanwendungen Hintergrundverarbeitungsfunktionen ermöglichen und unterstützen Multithreading sehr gut. Daher können Javascript-Anwendungen, die HTML5 verwenden, die Vorteile von Multi-Core-CPUs voll ausnutzen und Web Workern langfristige Aufgaben zur Ausführung zuweisen. Hinweis: In Web Workern ausgeführte Skripte können nicht auf das Fensterobjekt der Seite zugreifen.

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

5.Offline-Webanwendungen
Der Offline-Anwendungscache von HTML5 ermöglicht die Ausführung von Anwendungen ohne Netzwerkverbindung. Wenn Sie eine Website mit Offline-Zugriffsfunktion zum ersten Mal besuchen, teilt der Webserver dem Browser mit, welche Dateien erforderlich sind, um sicherzustellen, dass sie offline funktioniert. Bei diesen Dateien kann es sich um beliebige Dateien handeln – HTML, Javascript, Bilder oder Videos.

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

6.GeolocationDie Geolocation-API von HTML5 kann Ihren Standort auf der Welt lokalisieren und die Standortinformationen mit Genehmigung weitergeben. Mit dieser erstaunlichen Funktion können viele interessante Anwendungen erstellt werden. Zum Beispiel die Berechnung der Laufstrecke, soziale Anwendungen basierend auf GPS-Navigation usw. Es erhält Positionsdaten über IP-Adresse, GPS-Geolokalisierung, Wi-Fi-Geolokalisierung, Mobiltelefon-Geolokalisierung und benutzerdefinierte Geolokalisierung.

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

7. FormulareHTML5 definiert viele neue Eingabefeldtypen: Suche, die die Suche darstellt, numerische Eingabefeldnummer, Bereichsauswahl-Schiebereglerbereich, Farbauswahlfarbe, Telefonnummer Eingabefeld Tel., Website-Eingabefeld-URL, E-Mail-Eingabefeld E-Mail, Datumsauswahl, Datum, Monats-Eingabefeld Monat, Woche Eingabefeld Woche, Zeitstempel-Eingabefeld Uhrzeit, genaues Datum/Zeitstempel Ein- und Austrittsfeld Datum/Uhrzeit, Eingabefeld für lokales Datum und Uhrzeit datetime-local.

// 创建一个 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 进行详细讲解，把自己学到和研究的东西共享出来，欢迎大家来一块交流学习：）

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Erkennung der HTML5-API-Browserunterstützung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!