HTML5新特性[ Notifications ] 桌面訊息
阿新 • • 發佈:2019-01-08
在執行完以上程式碼後,我們就成功地建立了一個訊息框例項,在Chrome下面它最終會顯示成這樣:
到這裡我們已經成功了一半,但能不能正確地顯示出這個訊息框,最終還取決於使用者的授權。鑑於瀏覽器的安全機制,只有使用者同意網頁彈出訊息通知框,訊息通知才能夠真正的顯示出來。所以現在我們要做的就是申請使用者授權。
Notification類提供了一個requestPermission方法,用來請求使用者授權,程式碼如下:
Notification.requestPermission(function (permission) { console.log(permission); popNotice(); });
溫馨提示:使用者一旦沒有授權,拒絕,以上方法將不再執行!
示例demo
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>桌面訊息</title> </head> <body> <!--JS程式碼:--> <script type="text/javascript"> // 判斷是否支援Notification if (window.Notification) { //Notification 方法 var popNotice = function () { var notification = new Notification("Hi,帥哥:", { body: '可以加你為好友嗎?', //顯示訊息的內容 icon: 'http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg' //顯示訊息的縮圖 }); //訊息框被點選時被呼叫 //可以開啟相關的檢視,同時關閉該訊息框等操作 notification.onclick = function () { notification.close(); }; //5秒後關閉訊息框 notification.onshow = function () { setTimeout(function () { notification.close(); }, 5000); }; }; if (Notification.permission == "granted") { //授權 popNotice(); } else if (Notification.permission != "denied") { //沒有授權時詢問 Notification.requestPermission(function (permission) { console.log(permission); popNotice(); }); } } else { alert('瀏覽器不支援Notification'); } </script> </body> </html>