首页 > 文章 > web前端 > 用HTML5实现桌面提醒功能的一个实例代码

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

零下一度原创: 2017-04-22 14:37:542622浏览

桌面提醒的介绍

桌面通知功能能够让浏览器即使是最小化状态也能将消息通知给用户。这和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中的消息通信代码

查看更多