cari

Rumah >hujung hadapan web >Tutorial H5 >用HTML5实现桌面提醒功能的一个实例代码

用HTML5实现桌面提醒功能的一个实例代码

零下一度
零下一度asal
2017-04-22 14:37:542696semak imbas

桌面提醒的介绍

桌面通知功能能够让浏览器即使是最小化状态也能将消息通知给用户。这和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在线视频教程可以免费观看！

Atas ialah kandungan terperinci 用HTML5实现桌面提醒功能的一个实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：用html5实现画虚线效果代码Artikel seterusnya：详解HTML5中的消息通信代码

Artikel berkaitan

Lihat lagi