首頁 >web前端 >H5教程 >用HTML5實作桌面提醒功能的一個實例程式碼

用HTML5實作桌面提醒功能的一個實例程式碼

零下一度原創: 2017-04-22 14:37:542696瀏覽

桌面提醒的介紹

桌面通知功能能夠讓瀏覽器即使是最小化狀態也能將訊息通知給使用者。這和WebIM是最天然的結合。不過，目前支援Desktop Notification功能的瀏覽器只有Chrome5+。在實際使用的過程中，應該盡量減少通知功能對使用者的干擾，最大程度的減少通知功能的出現，這就需要解決以下幾個問題：

1. 收到多個訊息時確保只出現一則通知;
2. 當使用者處於IM出現的頁面中時(頁面處於Focus狀態)將不出現通知;
3. 當使用者使用多Tab開啟多個存在IM的頁面時，只要有一個頁面處於Focus狀態將不出現通知;
4. 如何讓使用者點擊通知浮動層即可定位到具體的聊天視窗
5.此外，還需要解決一個便利性問題

桌面提醒Notification的API

window.webkitNotifications

requestPermission 請求通訊許可

##checkPermission 檢查通訊許可

createNotification 建立通訊############show #>實現###

<!DOCTYPE HTML>
<html>
<head
<meta charset="gbk">  
<title>Creating OS notifications in HTML5</title>
</head>
<body>
<input type="button" value="验证授权" onclick="init();" />
<input type="button" value="弹出消息" onclick="notify();" />

    <script type="text/javascript">
        const miao = 5;

        function init() {
            if (window.webkitNotifications) {
                window.webkitNotifications.requestPermission();
            }
        }

        function notify() {
            var icon = "logo.png";
            var title = "Hello World";
            var body =  "You Are My World (5秒后自动关闭)";

            if (window.webkitNotifications) {
                if (window.webkitNotifications.checkPermission() == 0) {
                    var popup = window.webkitNotifications.createNotification(icon, title, body);
					popup.ondisplay = function(event) {
                        setTimeout(function() {
                            event.currentTarget.cancel();
                        }, miao * 1000);
                    }
                    popup.show();
                    popup.show();
                } else {
                    window.webkitNotifications.requestPermission();
                    return;
                }
            }
        }
    </script>

</body>
</html>

###需要學習html5的同學請關注php中文網###html5影片教學###，眾多html5線上影片教學可以免費觀看！ ###

以上是用HTML5實作桌面提醒功能的一個實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：用html5實作畫虛線效果碼下一篇：用html5實作畫虛線效果碼

看更多