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

桌面通知功能能够让浏览器即使是最小化状态也能将消息通知给用户。这和WebIM是最为天然的结合。不过，目前支持Desktop Notification功能的浏览器只有Chrome5+。在实际使用的过程中，应该尽量减少通知功能对用户的干扰，最大程度的减少通知功能的出现，这就需要解决以下几个问题：

1. 收到多条消息时确保只出现一条通知;

2. 当用户处于IM出现的页面中时(页面处于Focus状态)将不出现通知;

3. 当用户使用多Tab开启多个存在IM的页面时，只要有一个页面处于Focus状态将不出现通知;

4. 如何让用户点击通知浮动层即可定位到具体的聊天窗口

5.此外，还需要解决一个便利性问题

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= 验证授权 quot;init(); /  input type= button value= 弹出消息 quot;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实现桌面提醒功能的一个实例代码的详细内容，其它编程语言

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。