HTML5 melaksanakan fungsi pemberitahuan desktop API Pemberitahuan _html5 kemahiran tutorial-Tutorial H5-php.cn

HTML5 melaksanakan fungsi pemberitahuan desktop API Pemberitahuan _html5 kemahiran tutorial

WBOY

Lepaskan： 2016-05-16 15:51:45

asal

1967 orang telah melayarinya

Mengapa kita memerlukan pemberitahuan desktop HTML5
Pemberitahuan desktop tradisional boleh ditulis sebagai div dan diletakkan di penjuru kanan sebelah bawah halaman untuk muncul secara automatik dan menerima mesej melalui undian dan kaedah lain Tolak kepada pengguna. Satu kelemahan kaedah ini ialah apabila saya menggunakan JD.com untuk membeli-belah, saya tidak tahu bahawa Renren telah menghantar berita kepada saya, tetapi saya perlu menunggu sehingga saya menukar halaman semasa kepada Renren untuk mengetahui bahawa terdapat berita . Kaedah tolakan mesej ini adalah berdasarkan kelangsungan halaman, tetapi kami memerlukan strategi sedemikian: tidak kira halaman mana yang anda lihat, selagi ada mesej, ia harus ditolak kepada saya Ini adalah masalah yang ingin diselesaikan oleh webkitNotification selesaikan. Mesej yang dijana oleh Pemberitahuan tidak dilampirkan pada halaman tertentu, hanya pada penyemak imbas.
Proses biasa menjana pemberitahuan desktop
Mari kita lihat dahulu cara pemberitahuan desktop dijana:
1 Periksa sama ada penyemak imbas menyokong Pemberitahuan
2. Semak kebenaran pemberitahuan penyemak imbas (sama ada pemberitahuan dibenarkan)
3 Jika kebenaran tidak mencukupi, dapatkan kebenaran pemberitahuan penyemak imbas
4 >NOTA : Mengenai perkara pertama, beberapa penjelasan diperlukan belum diseragamkan, jadi pada masa ini ia hanya menyokong chrome19 dan safari6. Terdapat maklumat di Internet bahawa Firefox26 juga menyokongnya, tetapi keputusan ujian Firefox27 saya ia tidak boleh disokong.
Saya percaya semua orang sudah biasa dengan pemberitahuan desktop HTML5. Aplikasi biasa termasuk versi web WeChat, yang memerlukan penyediaan fungsi pemberitahuan desktop sebelum ia boleh digunakan.
Tidak sukar untuk melaksanakan fungsi sedemikian menggunakan program klien. Untuk versi web tradisional pemberitahuan desktop, anda boleh menulis div dan meletakkannya di penjuru kanan sebelah bawah halaman untuk muncul secara automatik, dan mendapatkan mesej melalui tinjauan pendapat dan kaedah lain dan menolaknya kepada pengguna. Satu kelemahan kaedah ini ialah apabila saya menggunakan Taobao untuk membeli-belah, saya tidak tahu bahawa terdapat mesej yang ditolak kepada saya di Weibo, tetapi saya perlu menunggu sehingga saya menukar halaman semasa kepada Sina Weibo untuk mengetahui bahawa terdapat mesej yang ditolak kepada saya. Kaedah tolakan mesej ini adalah berdasarkan kelangsungan halaman, tetapi kami memerlukan strategi sedemikian: tidak kira halaman mana yang anda lihat, selagi ada mesej, ia harus ditolak kepada saya Ini adalah masalah yang ingin diselesaikan oleh webkitNotification selesaikan.
Pemberitahuan belum diseragamkan lagi, jadi anda tidak boleh mempelajarinya di tapak web seperti w3cschool. Walau bagaimanapun, kebanyakan penyemak imbas arus perdana semasa menyokong Pemberitahuan. Paparan pemberitahuan desktop html5 adalah seperti berikut:

Kod adalah seperti berikut:

Kod XML/HTML

Salin kandungan ke papan keratan

>
<html>
<kepala>
<meta charset="utf- 8">
<tajuk>pemberitahuan desktop HTML5 tajuk>
kepala>
<badan>
<input taip="butang" nilai="Hidupkan pemberitahuan desktop" onclick ="showNotice();">
<skrip>
fungsi showNotice(){
Notification.requestPermission(function(status){
//Nilai lalai status 'lalai' adalah bersamaan dengan penolakan 'ditolak' bermakna pengguna tidak mahu pemberitahuan 'diberikan' bermakna pengguna bersetuju untuk mendayakan pemberitahuan
jika("diberikan" != status)
kembali;
var maklumkan = baharu Pemberitahuan("Mesej",{
dir:'auto',
lang:'zh-CN',
teg:'sds',//Id pemberitahuan segera
//ikon menyokong format ico, png, jpg, jpeg
ikon:'http://www.xttblog.com/icons/favicon.ico',//Imej lakaran kecil pemberitahuan
body:'html5 desktop notification' //Kandungan khusus pemberitahuan
});
notify.onclick=fungsi(){
//Jika mesej pemberitahuan diklik, tetingkap pemberitahuan akan diaktifkan
window.focus();
}
});
}
skrip>
badan>
html>

Kandungan di atas ialah pelaksanaan HTML5 fungsi pemberitahuan desktop API Pemberitahuan yang dikongsi oleh editor saya harap ia akan membantu semua orang!
Teks asal: http://www.xttblog.com/?p=249