前端js實現桌面通知
阿新 • • 發佈：2019-01-02
前端js實現桌面通知
前端js實現桌面通知，思路是呼叫Notification物件，先檢測使用者是否授權桌面顯示，若授權則進行顯示，若不授權則不顯示。
在Notification物件中常用的屬性有title(桌面通知標題)、body(桌面通知的主體內容，注意不對html進行轉義，只是字串)、icon(桌面通知左邊的logo)、dir(主體內容的水平書寫順序)。
Notification有onclick事件、onerror事件、onshow事件、close()事件。可以使用setInterval或者setTimeout定時器對桌面通知的消失事件進行操控，可在其他的事件中對桌面通知進行互動。
本次實現的是頁面初始化的時候請求使用者是否允許顯示桌面通知，若允許則顯示，若不允許則不顯示。在顯示桌面通知後，使用者可手動關閉，若使用者不關閉，則5秒鐘之後自行關閉，當用戶點選桌面通知時實現開啟當前頁面並重新整理。
可以直接執行的程式碼
本次實現的是頁面初始化的時候請求使用者是否允許顯示桌面通知，若允許則顯示，若不允許則不顯示。在顯示桌面通知後，使用者可手動關閉，若使用者不關閉，則5秒鐘之後自行關閉，當用戶點選桌面通知時實現開啟當前頁面並重新整理。
可以直接執行的程式碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 測試桌面通知，視窗小化效果更好。 </body> <script type="text/javascript"> document.addEventListener('DOMContentLoaded',function(){ if(! ('Notification' in window) ){ alert('Sorry bro, your browser is not good enough to display notification'); return; } Notification.requestPermission(function(permission){ var notification = new Notification("Here I am!",{body:'Thanks for clicking that button. Hope you liked.',icon:'',dir:'auto'}); setTimeout(function() { notification.close();//關閉桌面通知 }, 5000); notification.onclick = function(){ //點選桌面通知，模擬實現把使用者小化的視窗大化並重新整理 notification.close();//關閉桌面通知 var href = window.location.href;//獲取當前頁面的url window.close();//將當前頁面關閉 window.open(href);//新開一個頁面，url為當前頁面 } navigator.onerror = function(){ //當有錯誤發生時會onerror函式會被呼叫 console.log('桌面通知發生了錯誤'); } navigator.onshow = function(){ //訊息框顯示時會被呼叫 console.log('桌面通知顯示ing'); } }); }); </script> </html>