HTML5 Notification(桌面提醒)功能使用实例
程序员文章站
2023-11-13 08:37:22
这篇文章主要介绍了HTML5 Notification(桌面提醒)功能使用方法,用实例来说明桌面提醒效果,需要的朋友可以参考下... 14-03-17...
一、html5 notification 简介
html5 notification ,即桌面通知。目前浏览器依然是一个严格的沙盒工作模式,这种模式把浏览器和桌面的通信隔离开。notification可以跨越沙盒能够让浏览器即使是最小化状态也能将消息通知给用户。
二、桌面提醒api
复制代码
代码如下:window.webkitnotifications
该api有3个方法:
复制代码
代码如下:requestpermission 请求桌面通知
checkpermission 检查桌面通知许可(permission_allowed = 0, permission_not_allowed = 1, permission_denied = 2)
createnotification 创建桌面通知
checkpermission 检查桌面通知许可(permission_allowed = 0, permission_not_allowed = 1, permission_denied = 2)
createnotification 创建桌面通知
三、桌面通知实例
下面让我们用该桌面通知api写个小功能:每隔20分钟在桌面发一个消息来提醒用户休息一下。
代码如下:
复制代码
代码如下:if(window.webkitnotifications){
if(window.webkitnotifications.checkpermission()==0){
setinterval(function(){
var popup = window.webkitnotifications.createnotification("avator.jpg","如花温馨提醒:","长时间面对电脑眼睛会瞎的,休息一下~!");
popup.show();
},1000 * 60 * 20);</p> <p> }else{
window.webkitnotifications.requestpermission();
}
}else{
alert('浏览器不支持桌面通知~!');
}
if(window.webkitnotifications.checkpermission()==0){
setinterval(function(){
var popup = window.webkitnotifications.createnotification("avator.jpg","如花温馨提醒:","长时间面对电脑眼睛会瞎的,休息一下~!");
popup.show();
},1000 * 60 * 20);</p> <p> }else{
window.webkitnotifications.requestpermission();
}
}else{
alert('浏览器不支持桌面通知~!');
}
然后20分钟之后桌面就会出现:
上一篇: HTML5中的Scoped属性使用实例
下一篇: 使用html5制作loading图的示例
推荐阅读
-
HTML5 Notification(桌面提醒)功能使用实例
-
HTML5中的Web Notification桌面右下角通知功能的实现
-
HTML5中的Web Notification桌面通知功能的实现方法
-
HTML5中的Web Notification桌面右下角通知功能的实现
-
用HTML5实现桌面提醒功能的一个实例代码
-
html5使用canvas制作弹幕功能实例讲解
-
html5使用canvas制作弹幕功能实例讲解
-
HTML5中的Web Notification桌面通知功能的实现方法
-
HTML5 Notification(桌面提醒)功能使用实例_html5教程技巧
-
HTML5实现Notification API桌面通知功能 _html5教程技巧