5 einfache und praktische APIs in HTML5 (Teil 2, einschließlich Vollbild, Sichtbarkeit, Fotoaufnahme, Vorladen, Batteriestatus)_HTML5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

5 einfache und praktische APIs in HTML5 (Teil 2, einschließlich Vollbild, Sichtbarkeit, Fotoaufnahme, Vorladen, Batteriestatus)_HTML5-Tutorial-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:48:04

Original

1386 Leute haben es durchsucht

Die Geburt von HTML5 hat uns viele wundervolle neue Funktionen und Features von JavaScript und HTML beschert. Einige der neuen Features sind uns schon seit Jahren bekannt und werden umfangreich genutzt, während andere vor allem in modernen Mobiltechnologien oder als Zusatzfunktionen in Desktop-Anwendungen zum Einsatz kommen. Egal wie leistungsstark und benutzerfreundlich diese neuen HTML5-Funktionen sind, sie alle sind darauf ausgelegt, uns dabei zu helfen, Browser-Frontend-Anwendungen besser zu entwickeln. Ich habe Ihnen zuvor einen Artikel über 5 neue HTML5-Funktionen mitgeteilt, die Sie noch nicht kennen. Ich hoffe, dass einige der darin erwähnten Technologien dazu beitragen können, Ihre Webanwendungen zu verbessern. Hier möchte ich Ihnen auch einige neue HTML5-Funktionen vorstellen, die nur wenige Menschen kennen. Ich hoffe, dass sie Ihnen von Nutzen sein können!

1. Vollbild-API-Schnittstelle

Die leistungsstarke Vollbild-API-Schnittstelle ermöglicht es Programmierern, den Browser durch Programmierung in den Vollbildmodus zu starten und die Erlaubnis des Benutzers anzufordern:

Code kopieren

Der Code lautet wie folgt:

// Finden Sie die richtige Methode, rufen Sie das richtige Element auf
Funktion launchFullScreen(element) {
if(element. requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element. webkitRequestFullScreen();
}
}

// Vollbild für Browser starten, die dies unterstützen!
launchFullScreen(document.documentElement); // die gesamte Seite
launchFullScreen(document.getElementById("videoElement")); 🎜>

Jedes Seitenelement kann das Ziel der Vollbildausgabe sein. HTML5 bietet sogar eine CSS-Pseudoklasse, mit der Programmierer den Stil von Vollbildelementen steuern können, wenn der Browser im Vollbildmodus ist. Diese Vollbild-API ist besonders nützlich, wenn Sie ein Spiel entwickeln; insbesondere einen Shooter wie BananaBread.

2. Seitensichtbarkeits-API-Schnittstelle

Die Seitensichtbarkeits-API-Schnittstelle stellt ein Abhörereignis bereit. Dieses Ereignis kann dem Programmierer mitteilen, ob es sich bei der aktuellen Seite um eine im Browser aktivierte Registerkarte/Fenster handelt und ob es sich um die Seite handelt, die der Benutzer gerade ansieht Um die Seite zu wechseln und die Anzeige dieser Seite/dieses Fensters zu beenden:

Kopieren Sie den CodeDer Code lautet wie folgt:

// Leicht angepasst von Sam Dutton
// Legen Sie den Namen der versteckten Eigenschaft und des Sichtbarkeitsänderungsereignisses fest
// da einige Browser nur herstellerpräfixierte Unterstützung bieten
var versteckt, Zustand, SichtbarkeitÄnderung ;
if (typeof document.hidden !== "undefiniert") {
versteckt = "versteckt";
sichtbarkeitChange = "visibilitychange";
state = "visibilityState";
} sonst if (typeof document.mozHidden !== "undefiniert") {
Hidden = "mozHidden";
VisibilityChange = "mozvisibilitychange";
state = "mozVisibilityState";
} else if (Typeof Document .msHidden !== "undefiniert") {
versteckt = "msHidden";
sichtbarkeitChange = "msvisibilitychange";
state = "msVisibilityState";
} else if (typeof document.webkitHidden != = "undefiniert") {
versteckt = "webkitHidden";
sichtbarkeitChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}

// Einen Listener hinzufügen, der den Titel ständig ändert
document.addEventListener(visibilityChange, function(e) {
// Verarbeitung je nach Status starten oder stoppen

}, false);

Durch die flexible Verwendung dieser API können Programmierer einige schwere Aufgaben (wie AJAX oder Animation) anhalten, wenn der Benutzer diese Seite nicht ansieht.

3. getUserMedia-Schnittstellen-API

getUserMedia API ist eine sehr interessante Schnittstelle! Mit dieser API und dem Hinzufügen der Tags