HTML5實(shí)現(xiàn)桌面通知 提示功能

具體代碼如下所示:
<button id="button">有人想加你為好友</button> <p id="text"></p> ;(function (){ if(window.Notification){ var btn = document.getElementById("button"); var txt = document.getElementById("text"); btn.onclick = function (){ if(Notification.permission == "granted"){ popNotice(); }else if(Notification.permission != "denied"){ Notification.requestPermission().then(function (permission){ popNotice() }) } }; function popNotice(){ if(Notification.permission == "granted"){ var notification = new Notification("你好:",{ body:"請(qǐng)問(wèn)今晚有空嗎", icon:"http://image.zhangxinxu.com/左邊頭像地址" }); notification.onclick = function (){ txt.innerHTML = new Date().toTimeString().split(" ")[0]+"收到信息"; notification.close(); } } } }else{ console.log("瀏覽器不支持Notification"); } })();
Notification.requestPermission()是個(gè)請(qǐng)求 ,讓瀏覽器出現(xiàn)是否允許通知的提示 和 Notification.permission 一樣 返回 "3"個(gè)值 "granted" "default" "denied" 戶(hù)允許通知, 用戶(hù)目前還沒(méi)有管, 用戶(hù)嫌棄
總結(jié)
以上所述是小編給大家介紹的HTML5實(shí)現(xiàn)桌面通知 提示功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Html5中的桌面通知Notification的實(shí)現(xiàn)
這篇文章主要介紹了Html5中的桌面通知Notification的實(shí)現(xiàn)的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-25HTML5實(shí)現(xiàn)Notification API桌面通知功能
Notification生成的消息不依附于某個(gè)頁(yè)面,僅僅依附于瀏覽器。 下面通過(guò)本文給大家介紹HTML5實(shí)現(xiàn)Notification API桌面通知功能,需要的朋友參考下吧2016-03-02html5桌面通知(Web Notifications)實(shí)例解析
這篇文章主要為大家介紹了html5桌面通知(Web Notifications)實(shí)例,對(duì)于進(jìn)行html5網(wǎng)站建設(shè)非常有用!需要的朋友可以參考下2014-07-07突襲HTML5之Javascript API擴(kuò)展5—其他擴(kuò)展(應(yīng)用緩存/服務(wù)端消息/桌面
前面已經(jīng)總結(jié)了主要的API擴(kuò)展(應(yīng)用緩存/服務(wù)端消息/桌面通知),下面的幾個(gè)只有在特定的場(chǎng)合才能發(fā)揮它的潛質(zhì),無(wú)一例外,IE均不支持,桌面通知目前只有Chrome支持,感興趣的朋2013-01-31HTML5中的Web Notification桌面通知功能的實(shí)現(xiàn)方法
這篇文章主要介紹了HTML5中的Web Notification桌面通知功能的實(shí)現(xiàn)方法,需要的朋友可以參考下2019-07-29