用HTML5实现桌面提醒功能的一个实例代码
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了用HTML5实现桌面提醒功能的一个实例代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1761字，纯文字阅读大概需要3分钟。
内容图文
桌面提醒的介绍桌面通知功能能够让浏览器即使是最小化状态也能将消息通知给用户。这和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的同学请关注Gxl网html5视频教程，众多html5在线视频教程可以免费观看！
以上就是用HTML5实现桌面提醒功能的一个实例代码的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的用HTML5实现桌面提醒功能的一个实例代码全部内容，希望文章能够帮你解决用HTML5实现桌面提醒功能的一个实例代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。