瀏覽器通知--window.Notification

參考連接: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:是否替換以前的通知項

相關文章
相關標籤/搜索