參考連接:http://blog.csdn.net/guoquanyou/article/details/51726571html
Web Notifications是HTML5 的一個特性,目前我知道的有谷歌瀏覽器和windows edge對它進行了支持html5
下面是一個簡單的示例(注意測試的時候須要把頁面發佈到瀏覽器上纔會有效果):windows
<div class="row"> <div class="col-md-12"> <button id="showNoti">顯示通知</button> </div> </div> <script> $(function () { $("#showNoti").click(function () { if (!window.Notification) { alert("瀏覽器不支持通知!"); } console.log(window.Notification.permission);
if (window.Notification.permission != 'granted') { Notification.requestPermission(function (status) { //status是受權狀態,若是用戶容許顯示桌面通知,則status爲'granted' console.log('status: ' + status); //permission只讀屬性: // default 用戶沒有接收或拒絕受權 不能顯示通知 // granted 用戶接受受權 容許顯示通知 // denied 用戶拒絕受權 不容許顯示通知 var permission = Notification.permission; console.log('permission: ' + permission); }); }
var n = new Notification("您有一條消息!", { "icon": "", "body": "您一分鐘後將有好運氣" }); n.onshow = function () { console.log("顯示通知"); setTimeout(function () { n.close() }, 2000); }; n.onclick = function () { alert("打開相關視圖"); window.open("/Home/about"); n.close(); }; n.onclose = function () { console.log("通知關閉"); }; n.onerror = function () { console.log('產生錯誤'); //do something useful }; }); }); </script>
相關函數:瀏覽器
Notification.requestPermission(callback);--用於取得用戶贊成函數
Notification.permission --用戶是否贊成顯示通知,相關取值:測試
「granted」(狀態值:0)表示用戶贊成消息提醒;「default」(狀態值:1)表示默認狀態,用戶既未拒絕,也未贊成;「denied」(狀態值:1)表示用戶拒絕消息提醒。只有在狀態值爲0的時候纔可以容許消息提醒spa
new Notification(title, options).net
經過new構造,顯示通知。 code
其中title是必須參數,options是可選參數,下面是一些參數的簡單說明htm
lang:提示的語言
bady:提示消息的主體內容。
tag:標記當前通知的標籤
icon:就是提示的時候顯示的圖標
renotify:是否替換以前的通知項