5 fungsi API HTML5 yang berkuasa recommendations_html5 kemahiran tutorial

HTML5 menyediakan beberapa JavaScript dan HTML API yang sangat berkuasa untuk membantu pembangun membina aplikasi desktop dan mudah alih yang menakjubkan. Artikel ini akan memperkenalkan 5 API baharu, dengan harapan dapat membantu kerja pembangunan anda.

1. API skrin penuh

API ini membolehkan pembangun menjalankan aplikasi web secara pengaturcaraan dalam skrin penuh, menjadikan aplikasi web lebih seperti aplikasi asli.

Salin kod

Kodnya adalah seperti berikut:

// Cari penuh kaedah skrin sesuai untuk penyemak imbas
pelancaran fungsiFullScreen(elemen) {
if(element.requestFullScreen) {
elemen.requestFullScreen();
} else if(element.mozRequestFullScreen) {
.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
// Lancarkan mod skrin penuh
launch(docullFull documentElement); // seluruh halaman
launchFullScreen(document.getElementById("videoElement")); // mana-mana elemen individu

　2. API Keterlihatan Halaman (API Keterlihatan Halaman)

API ini boleh digunakan untuk mengesan keterlihatan halaman kepada pengguna, iaitu mengembalikan perubahan status halaman atau tab yang sedang dilayari oleh pengguna.

Salin kod

Kod tersebut adalah seperti berikut:

// Tetapkan atribut tersembunyi dan peristiwa perubahan yang boleh dilihat Nama dan atribut perlu ditambah dengan awalan penyemak imbas
// memandangkan sesetengah penyemak imbas hanya menawarkan sokongan awalan vendor
var hidden, state, visibilityChange
if (typeof document.hidden != = "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
state = "visibilityState"; ) {
tersembunyi = "mozHidden";
visibilityChange = "mozvisibilitychange";
state = "mozVisibilityState"; > tersembunyi = "msHidden" ;
visibilityChange = "msvisibilitychange";
state = "msVisibilityState"; webkitHidden";
visibilityChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}
// Tambah pendengar untuk perubahan tajuk
document.addEventListener(visibilityChange, function(e) {
// Mulakan atau hentikan pemprosesan status
}, palsu);




　3. getUserMedia API

API ini membenarkan aplikasi web mengakses kamera dan mikrofon tanpa menggunakan pemalam.

Salin kod

Kodnya adalah seperti berikut:// Tetapkan pendengar acara window.addEventListener("DOMContentLoaded", function() {

// Dapatkan elemen

var canvas = document.getElementById("canvas"),

context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: " , error .code);
};
// Tetapkan pendengar video
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(strim) {
video . src = stream;
video.play();
}, errBack
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function strim ){
video.src = window.webkitURL.createObjectURL(strim
video.play();
}, errBack }
}, palsu);




　4. API Bateri

Ini ialah API untuk aplikasi peranti mudah alih, digunakan terutamanya untuk mengesan maklumat bateri peranti.

Salin kod

Kod tersebut adalah seperti berikut:

var Battery = navigator.battery ||. navigator.mozBattery; true
console.warn("Battery level: ", battery.level); // 0,58
console.warn("Battery entladezeit: ",
// Ereignis-Listener hinzufügen
battery.addEventListener("Ladewechsel", Funktion(e) {
console.warn("Ladeänderung des Akkus: ", batterie.Laden);
}, false);

5. Link-Prefetching

Laden Sie Webseiteninhalte vorab, um den Zuschauern ein reibungsloses Surferlebnis zu bieten.

Code kopierenDer Code lautet wie folgt:

Die oben genannten 5 neuen APIs verstehen Sie? Wenn Sie Fragen haben, hinterlassen Sie bitte eine Nachricht und machen Sie gemeinsam Fortschritte.