您现在的位置是：网站首页> 编程资料编程资料

HTML5 Notification（桌面提醒）功能使用实例HTML5中的Web Notification桌面右下角通知功能的实现HTML5实现Notification API桌面通知功能使用HTML5的Notification API制作web通知的教程html5桌面通知(Web Notifications)实例解析Html5中的桌面通知Notification的实现

2021-09-01 1227人已围观

简介这篇文章主要介绍了HTML5 Notification（桌面提醒）功能使用方法,用实例来说明桌面提醒效果,需要的朋友可以参考下

一、HTML5 Notification 简介
HTML5 Notification ，即桌面通知。目前浏览器依然是一个严格的沙盒工作模式，这种模式把浏览器和桌面的通信隔离开。Notification可以跨越沙盒能够让浏览器即使是最小化状态也能将消息通知给用户。
二、桌面提醒API

复制代码

代码如下:

window.webkitNotifications

该API有3个方法：

复制代码

代码如下:

requestPermission 请求桌面通知
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);

}else{
window.webkitNotifications.requestPermission();
}
}else{
alert('浏览器不支持桌面通知～！');
}

然后20分钟之后桌面就会出现：

上一篇：HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影HTML5播放实现rtmp流直播html5用video标签流式加载的实现基于 HTML5 WebGL 实现的医疗物流系统Html5 实现微信分享及自定义内容的流程HTML5 canvas 瀑布流文字效果的示例代码HTML5移动端手机网站开发流程HTML5梦幻之旅——炫丽的流星雨效果实现过程HTML5 离线应用之打造零请求、无流量网站的解决方法Html5之webcoekt播放JPEG图片流

下一篇：用html5实现语音搜索框的方法HTML实现移动端固定悬浮半透明搜索框超酷html5+CSS3绿色发光搜索框表单提交分享8款纯CSS3实现的搜索框功能CSS3实现的可伸缩搜索框效果(无js)CSS 漂亮搜索框美化代码css 教学实例漂亮的搜索框基于html css实现带搜索图标的搜索框功能

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢