5 puissantes fonctions de l'API HTML5 recommendation_html5 compétences du didacticiel

HTML5 fournit des API JavaScript et HTML très puissantes pour aider les développeurs à créer d'étonnantes applications de bureau et mobiles. Cet article présentera 5 nouvelles API, dans l’espoir d’être utile à votre travail de développement.

1. API plein écran

Cette API permet aux développeurs d'exécuter par programmation des applications Web en plein écran, ce qui rend les applications Web davantage semblables à des applications natives.

Copiez le code

Le code est le suivant :

// Retrouvez l'intégralité méthode d'écran adaptée au navigateur
function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen(); else if(element.mozRequestFullScreen) {
element .mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
// Lancer le mode plein écran
launchFullScreen(document. documentElement); // la page entière
launchFullScreen(document.getElementById("videoElement")); // tout élément individuel

　2. API de visibilité de page (API de visibilité de page)

Cette API peut être utilisée pour détecter la visibilité de la page pour l'utilisateur, c'est-à-dire renvoyer le changement de statut de la page ou de l'onglet actuellement parcouru par l'utilisateur.

Copier le codeLe code est le suivant :

// Définir les attributs cachés et événements de changement visibles Le nom et les attributs doivent être ajoutés avec le préfixe du navigateur
// puisque certains navigateurs n'offrent que la prise en charge du préfixe du fournisseur
var caché, état, visibilitéChange
if (typeof document.hidden != = "non défini") {
caché = "caché";
visibilitéChange = "visibilitéchange"
state = "visibilitéState"
} else if (typeof document.mozHidden !== "undéfini"; ) {
caché = "mozHidden";
visibilitéChange = "mozvisibilitychange";
state = "mozVisibilityState"
} else if (typeof document.msHidden !== "undefined") {
caché = "msHidden" ;
visibilitéChange = "msvisibilitychange";
state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
caché = " webkitHidden";
visibilitéChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}
// Ajouter un écouteur pour le changement de titre
document.addEventListener(visibilityChange, function(e) {
// Démarrer ou arrêter le traitement du statut
}, false);

　3. API getUserMedia Cette API permet aux applications Web d'accéder à la caméra et au microphone sans utiliser de plug-ins.

Copier le codeLe code est le suivant :

// Définir l'écouteur d'événement
window.addEventListener("DOMContentLoaded", function() {
// Récupérer l'élément
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Erreur de capture vidéo : " , error .code);
};
// Définir l'écouteur vidéo
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video . src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // Préfixé par WebKit
navigator.webkitGetUserMedia(videoObj, function( stream ){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
},
}
}, false);

　4. API de batterie

Il s'agit d'une API pour les applications d'appareils mobiles, principalement utilisée pour détecter les informations sur la batterie de l'appareil.

Copier le codeLe code est le suivant :

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;
// 電池屬性
console.warn("Battery charging: ", battery.charging); true
console.warn("Battery level: ", battery.level); // 0.58
console.warn("Battery discharging time: ", battery.dischargingTime);
// 新增事件監聽器
battery.addEventListener("chargingchange", function(e) {
console.warn("Battery charge change: ", battery.charging);
}, false);

　　5.  Link Prefetching

　　預先載入網頁內容，提供瀏覽者一個平滑的瀏覽體驗。

複製程式碼

程式碼如下:

http://davidwalsh.name/css-enhancements-user-experience " />

以上就是這5個新型的API了，朋友們了解了嗎，有什麼疑問請留言，大家一起討論，共同進步。