html5 桌面提醒:Notifycations应用介绍


Posted in HTML / CSS onNovember 27, 2012

HTML5中的桌面提醒(web notifications)可以在当前页面窗口弹出一个消息框,这个消息框是跨 Tab 窗口的,这在用户打开多个 tab 浏览网页时,提醒比较方便,容易让用户看到。目前只要是 webkit 内核支持该功能。
该功能在 chrome 下需要以 http 方式打开网页才能启用。
桌面提醒功能由 window.webkitNotifications 对象实现(webkit内核)。
window.webkitNotifications 对象没有属性,有四个方法:
1.requestPermission()

该方法用于向用户申请消息提醒权限,如果当前没有开放该权限,浏览器将弹出授权界面,用户授权后,在对象内部产生一个状态值(一个0、1或 2 的整数):
0:表示用户同意消息提醒,只在该状态下可以使用信息提醒功能;
1:表示默认状态,用户既未拒绝,也未同意;
2:表示用户拒绝消息提醒。
2.checkPermission()

这个方法用于获取 requestPermission() 申请到的权限的状态值。
3.createNotification()

这个方法以纯消息的方式创建提醒消息,它接受三个字符串参数:
iconURL:在消息中显示的图标地址,
title:消息的标题,
body:消息主体文本内容
该方法会返回一个 Notification对象,可以针对这个对象做更多的设置。
Notification 对象的属性与方法:

复制代码
代码如下:

dir: ""
onclick: null
onclose: null
ondisplay: function (event) {
onerror: null
onshow: null
replaceId: ""
tag: ""
__proto__: Notification
addEventListener: function addEventListener() { [native code] }
cancel: function cancel() { [native code] }
close: function close() { [native code] }
constructor: function Notification() { [native code] }
dispatchEvent: function dispatchEvent() { [native code] }
removeEventListener: function removeEventListener() { [native code] }
show: function show() { [native code] }
__proto__: Object

dir:设置消息的排列方向,可取值为“auto”(自动), “ltr”(left to right), “rtl”(right to left)。

tag:为消息添加标签名。如果设置此属性,当有新消息提醒时,标签相同的消息只显示在同一个消息框,后一个消息框会替换先前一个,否则出现多个消息提示框,但是最多值显示3个消息框,超过3个,后继消息通知会被阻塞。

onshow:当消息框显示的时候触发该事件;

onclick: 当点击消息框的时候触发该事件;

onclose:当消息关闭的时候触发该事件;

onerror:当出现错误的时候触发该事件;
方法:

addEventListener && removeEventListener:常规的添加和移除事件方法;

show:显示消息提醒框;

close:关闭消息提醒框;

cancel:关闭消息提醒框,和 close一样;
4.createHTMLNotification()

该方法与 createNotification() 不同的是,他以HTML方式创建消息,接受一个参数: HTML 文件的URL,该方法同样返回 Notification对象。
一个实例:

复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>notifications in HTML5</title>
</head>
<body>
<form>
<input id="trynotification" type="button" value="Send notification" />
</form>
<script type="text/javascript">
document.getElementById("trynotification").onclick = function(){
notify(Math.random());
};
function notify(tab) {
if (!window.webkitNotifications) {
return false;
}
var permission = window.webkitNotifications.checkPermission();
if(permission!=0){
window.webkitNotifications.requestPermission();
var requestTime = new Date();
var waitTime = 5000;
var checkPerMiniSec = 100;
setTimeout(function(){
permission = window.webkitNotifications.checkPermission();
if(permission==0){
createNotification(tab);
}else if(new Date()-requestTime<waitTime){
setTimeout(arguments.callee,checkPerMiniSec);
}
},checkPerMiniSec);
}else if(permission==0){
createNotification(tab);
}
}
function createNotification(tab){
var showSec = 10000;
var icon = "http://tech.baidu.com/resource/img/logo_news_137_46.png";
var title = "[" + new Date().toLocaleTimeString() + "] close after " + (showSec/1000) + " seconds";
var body = "hello world, i am webkitNotifications informations";
var popup = window.webkitNotifications.createNotification(icon, title, body);
popup.tag = tab;
popup.ondisplay = function(event) {
setTimeout(function() {
event.currentTarget.cancel();
}, showSec);
}
popup.show();
}
</script>
</body>
</html>
HTML / CSS 相关文章推荐
利用CSS3实现炫酷的飞机起飞动画
Sep 17 HTML / CSS
CSS3实现多样的边框效果
May 04 HTML / CSS
HTML5之web workers_动力节点Java学院整理
Jul 17 HTML / CSS
HTML5 Canvas像素处理使用接口介绍
Dec 02 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
Nov 01 HTML / CSS
h5网页水印SDK的实现代码示例
Feb 19 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
详解HTML5.2版本带来的修改
May 06 HTML / CSS
css3 filter属性的使用简介
Mar 31 HTML / CSS
关于CSS浮动与取消浮动的问题
Jun 28 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 #HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 #HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
Nov 14 #HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 #HTML / CSS
Bootstrap 学习分享
Nov 12 #HTML / CSS
HTML5实践-图片设置成灰度图
Nov 12 #HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 #HTML / CSS
You might like
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
javascript 自动填写表单的实现方法
2010/04/09 Javascript
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
python使用xauth方式登录饭否网然后发消息
2014/04/11 Python
Python学习笔记_数据排序方法
2014/05/22 Python
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
Python自定义一个异常类的方法
2019/06/27 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
在pycharm中实现删除bookmark
2020/02/14 Python
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
临床医学专业个人的自我评价
2013/09/27 职场文书
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
全民创业工作总结
2015/08/13 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书
SpringBoot实现异步事件驱动的方法
2021/06/28 Java/Android
聊聊redis-dump工具安装问题
2022/01/18 Redis