前端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>