Rumah >hujung hadapan web >Tutorial H5 >Pemberitahuan Desktop HTML5 (Pemberitahuan Web) Contoh Analisis_html5 Kemahiran Tutorial

Pemberitahuan Desktop HTML5 (Pemberitahuan Web) Contoh Analisis_html5 Kemahiran Tutorial

WBOY
WBOYasal
2016-05-16 15:47:321905semak imbas

Pemberitahuan desktop HTML5 (Pemberitahuan Web) sangat berguna apabila perlu mempunyai kesan pemberitahuan desktop apabila mesej baharu masuk dalam talian Berikut ialah pengenalan ringkas kepada atribut baharu html5 ini.

Berikut ialah tunjuk cara yang bagus: tunjuk cara pemberitahuan web html5

Daripada demo di atas kita boleh mendapatkan kod teras asas yang kita perlukan, seperti berikut:


Salin kod
Kod tersebut adalah seperti berikut:

var Pemberitahuan = tetingkap. Pemberitahuan ||. window.mozNotification ||. >
function show() {
var instance = new Notification(
"test title", {
body: " test message"
}
);

instance. onclick = function () {
// Sesuatu untuk dilakukan
};
instance.onerror = function () {
// Sesuatu untuk dilakukan
};
instance .onshow = function () {
// Sesuatu untuk dilakukan
};
instance.onclose = function () {
// Sesuatu untuk dilakukan
};

return false;
}



Antaranya:
Notification.requestPermission Fungsi kod ini adalah untuk meminta kebenaran daripada pengguna
.

Melalui contoh di atas, kami sudah mempunyai idea asas Apabila memuatkan dokumen dahulu, kami meminta kebenaran pengguna selepas mendapat kebenaran, ia akan menjadi begitu mudah pada masa akan datang.

Salin kod

Kod adalah seperti berikut:window.addEventListener('load', function () { // Pada mulanya, mari kita semak sama ada kita mempunyai kebenaran untuk pemberitahuan jika (Pemberitahuan && Pemberitahuan. kebenaran !== "diberikan") {
Pemberitahuan.permintaanPermission(fungsi (status) {
jika (Pemberitahuan.kebenaran !== status) {
Pemberitahuan.kebenaran = status;
}
});
}
});


Pengesahan diluluskan di bawah Firefox, tetapi ia sentiasa gagal keluar di bawah Chrome Kemudian saya menemui perenggan ini

Salin kod

Kod tersebut adalah seperti berikut:Bukan Pepijat, Ciri. Pemberitahuan Desktop hanya boleh dicetuskan melalui tindakan pengguna Menaip ke dalam
konsol JavaScript mempunyai kesan yang sama seperti kod javascript mentah yang dibenamkan ke dalam halaman
(tiada tindakan pengguna menaip javascript ke lokasi). bar, walau bagaimanapun ,
mewakili tindakan pengguna (pengguna sengaja melawati pautan javascript untuk
mendayakan pemberitahuan, mungkin untuk tapak yang cenderung menggunakan href="javascript:" sebaliknya
onclick="" .

Saya agak pasti ini bukan isu.


Ternyata
mesti dicetuskan secara manual oleh pengguna di bawah chrome, jika tidak, pelayar chrome akan mengabaikan js ini
Tetapi adalah mustahil untuk menambah butang atau hiperpautan ke tapak web kami untuk membenarkan pengguna secara jelas membenarkannya, sebenarnya ini bukan masalah. Di bawah Chrome, satu kebenaran sah seumur hidup. Melainkan anda pergi ke tetapan dan melarangnya.

Untuk menyusunnya, kodnya adalah seperti berikut:

Salin kod

Kod tersebut adalah seperti berikut:
Funktion showMsgNotification(title, msg){
var Notification = window.Notification || window.mozNotification || window.webkitNotification;

if (Notification && Notification.permission === "granted") {
var example = new Notification(
title, {
body: msg,
icon: "image_url"
}
);

Instanz.onclick = Funktion () {
// Etwas zu tun
};
Instanz.onerror = Funktion ( ) {
// Etwas zu tun
};
instance.onshow = function () {
// Etwas zu tun
// console.log(instance.close);
setTimeout(instance.close, 3000);
};
example.onclose = function () {
// Etwas zu tun
};
}else if (Notification && Notification.permission !== "denied") {
Notification.requestPermission(function (status) {
if (Notification.permission !== status) {
Notification.permission = status;
}
// Wenn der Benutzer okay gesagt hat
if (status === "granted") {
var example = new Notification(
title, {
body: msg,
icon: "image_url"
}
) ;

Instanz.onclick = Funktion () {
// Etwas zu tun
};
Instanz.onerror = Funktion () {
// Etwas zu tun
};
example.onshow = function () {
// Etwas zu tun
setTimeout(instance.close, 3000);
};
example.onclose = function () {
// Etwas zu tun
};

}else {
return false
}
});
}else{
return false;
}

}
Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn