masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial H5 > Pemberitahuan HTML5 (peringatan desktop) contoh penggunaan fungsi_html5 kemahiran tutorial

Pemberitahuan HTML5 (peringatan desktop) contoh penggunaan fungsi_html5 kemahiran tutorial

WBOY
Lepaskan： 2016-05-16 15:48:13
asal
2255 orang telah melayarinya

1. Pengenalan kepada Pemberitahuan HTML5
Pemberitahuan HTML5 ialah pemberitahuan desktop. Pada masa ini, penyemak imbas masih beroperasi dalam mod kotak pasir yang ketat, yang mengasingkan komunikasi antara penyemak imbas dan desktop. Pemberitahuan boleh menjangkau kotak pasir, membolehkan penyemak imbas memberitahu pengguna tentang mesej walaupun ia diminimumkan.
2. Desktop Reminder API

Salin kod
Kodnya adalah seperti berikut:
window.webkitNotifications

API mempunyai 3 kaedah:

Salin kod
Kodnya adalah seperti berikut:
requestPermission request pemberitahuan desktop
checkPermission semak kebenaran pemberitahuan desktop (PERMISSION_ALOWED = 0, PERMISSION_NOT_ALLOWED = 1, PERMISSION_DENIED = 2)
createNotification create desktop notification

3. Contoh Pemberitahuan Desktop
Mari gunakan API pemberitahuan desktop untuk menulis fungsi kecil: hantar mesej pada desktop setiap 20 minit untuk mengingatkan pengguna untuk berehat. Kod adalah seperti berikut:


Salin kodKod adalah seperti berikut:
if(window.webkitNotifications) {
if(window.webkitNotifications.checkPermission()==0){
setInterval(function(){
var popup = window.webkitNotifications.createNotification("avator.jpg ","Peringatan Hangat Ruhua: ","Mata anda akan buta jika anda menghadap komputer untuk masa yang lama, berehat~");
popup.show();
},1000 * 60 * 20);

}else{
window.webkitNotifications.requestPermission();
}
}else{
alert('Pelayar tidak menyokong pemberitahuan desktop~!');
}

Kemudian desktop akan muncul selepas 20 minit:


Label berkaitan：
html5 notification
sumber：php.cn
Artikel sebelumnya：Penyelesaian untuk menjadikan Internet Explorer sebagai pelayar yang menyokong kemahiran tutorial HTML5 (menggunakan html5shiv)_html5 Artikel seterusnya：Cara menjadikan penyemak imbas di bawah IE9 serasi dengan petua tutorial HTML5_html5
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Isu terkini
Bagaimanakah saya boleh mendapatkan imej saya dipaparkan pada paparan utama halaman? Apa yang saya mahu lakukan ialah menerima beberapa gambar menggunakan NASAAPI. Foto-foto i...
daripada 2024-04-06 15:33:12
0
1
433
Bolehkah fail PDF menjalankan HTML5 dan Javascript? Saya mempunyai idea bodoh untuk mencuba dan membuat program yang tidak akan disekat pada m...
daripada 2024-04-05 12:57:00
0
1
456
Apakah perbezaan antara enctype dan formenctype dalam HTML5? Saya hanya tertanya-tanya apakah perbezaan antara atribut enctype dan formenctype dalam HT...
daripada 2024-04-02 11:47:56
0
1
275
Jadikan halaman itu mesra mudah alih? Saya mempunyai banyak halaman web dan beberapa laman web. Masalahnya, saya seorang pemula....
daripada 2024-04-01 20:42:38
0
1
259
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan