js实现浏览器通知功能
概述
Notification API是浏览器的通知接口,用于在用户的桌面(而不是网页上)显示通知信息,桌面电脑和手机都适用,比如通知用户收到了一封Email。具体的实现形式由浏览器自行部署,对于手机来说,一般显示在顶部的通知栏。
如果网页代码调用这个API,浏览器会询问用户是否接受。只有在用户同意的情况下,通知信息才会显示。
下面的代码用于检查浏览器是否支持这个API。
if (window.Notification) {
// 支持
} else {
// 不支持
}
目前,Chrome和Firefox在桌面端部署了这个API,Firefox和Blackberry在手机端部署了这个API。
if(window.Notification && Notification.permission !== "denied") {
Notification.requestPermission(function(status) {
var n = new Notification('通知标题', { body: '这里是通知内容!' });
});
}
上面代码检查当前浏览器是否支持Notification对象,并且当前用户准许使用该对象,然后调用Notification.requestPermission方法,向用户弹出一条通知。
Notification对象的属性和方法
Notification.permission
Notification.permission属性,用于读取用户给予的权限,它是一个只读属性,它有三种状态。
- default:用户还没有做出任何许可,因此不会弹出通知。
- granted:用户明确同意接收通知。
- denied:用户明确拒绝接收通知。
Notification.requestPermission()
Notification.requestPermission方法用于让用户做出选择,到底是否接收通知。它的参数是一个回调函数,该函数可以接收用户授权状态作为参数。
Notification.requestPermission(function (status) {
if (status === "granted") {
var n = new Notification("Hi!");
} else {
alert("Hi!");
}
});
上面代码表示,如果用户拒绝接收通知,可以用alert方法代替。
Notification实例对象
Notification构造函数
Notification对象作为构造函数使用时,用来生成一条通知。
var notification = new Notification(title, options);
Notification构造函数的title属性是必须的,用来指定通知的标题,格式为字符串。options属性是可选的,格式为一个对象,用来设定各种设置。该对象的属性如下:
- dir:文字方向,可能的值为auto、ltr(从左到右)和rtl(从右到左),一般是继承浏览器的设置。
- lang:使用的语种,比如en-US、zh-CN。
- body:通知内容,格式为字符串,用来进一步说明通知的目的。。
- tag:通知的ID,格式为字符串。一组相同tag的通知,不会同时显示,只会在用户关闭前一个通知后,在原位置显示。
- icon:图表的URL,用来显示在通知上。
上面这些属性,都是可读写的。
下面是一个生成Notification实例对象的例子。
var notification = new Notification('收到新邮件', {
body: '您总共有3封未读邮件。'
}); notification.title // "收到新邮件"
notification.body // "您总共有3封未读邮件。"
实例对象的事件
Notification实例会触发以下事件。
- show:通知显示给用户时触发。
- click:用户点击通知时触发。
- close:用户关闭通知时触发。
- error:通知出错时触发(大多数发生在通知无法正确显示时)。
这些事件有对应的onshow、onclick、onclose、onerror方法,用来指定相应的回调函数。addEventListener方法也可以用来为这些事件指定回调函数。
notification.onshow = function() {
console.log('Notification shown');
};
close方法
Notification实例的close方法用于关闭通知。
var n = new Notification("Hi!");
// 手动关闭
n.close();
// 自动关闭
n.onshow = function () {
setTimeout(n.close.bind(n), 5000);
}
上面代码说明,并不能从通知的close事件,判断它是否为用户手动关闭。
摘自http://m.blog.csdn.net/article/details?id=51004681
注意:
个人测试发现:该功能只有在服务器发布的页面下才可以出效果,静态页面没有任何效果也不报错。
效果图:
js实现浏览器通知功能的更多相关文章
- js实现浏览器打印功能
最近接触到一个新需求,实现打印机打印小票的功能.打的一桌子小票(惭愧),不过也基本满足了业务上的需求,现在分享一下如何实现(好记性不如烂笔头) 先上代码 // 布局代码 <div id=&quo ...
- H5 _浏览器通知功能使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js判断浏览器类型(手机和电脑终端)
工作中经常会用到通过js来判断浏览器的功能!今天这里通过js来判断浏览器是来自移动设备还是pc设备! 代码如下: var browser={ versions:function(){ var u = ...
- js屏蔽浏览器(IE和FireFox)的刷新和右键等功能
//一.js屏蔽浏览器(IE和FireFox)的刷新功能 document.onkeydown=function() { if ((window.event.keyCode==116)|| //屏蔽 ...
- iNotify.js通知JS 实现浏览器的 title 闪烁、滚动、声音提示、chrome、Firefox、Safari等系统通知。
https://github.com/jaywcjlove/iNotify JS 实现浏览器的 title 闪烁.滚动.声音提示.chrome.Firefox.Safari等系统通知. 这是重 ...
- js禁止浏览器页面后退功能
js禁止浏览器页面后退功能: <script> $(function(){ ) { //防止页面后退 history.pushState(null, null, document.URL) ...
- JS 获取浏览器和屏幕宽高等信息代码
JS 获取浏览器和屏幕宽高等信息. 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:doc ...
- js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop。(转)
js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop. 分类: js.jquery.ext.js技术2011 ...
- ASP.NET MVC 4 RC的JS/CSS打包压缩功能 (转载)
ASP.NET MVC 4 RC的JS/CSS打包压缩功能 打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载 ...
随机推荐
- NET Framework 4.5新特性 数据库的连接加密保护。
NET Framework 4.5新特性 (一) 数据库的连接加密保护. NET Framework 4.5 ado.net数据库连接支持使用SecureString内存流方式保密文本. 一旦使用这 ...
- CanVas类(绘图类)
知识点: Canvas():创建一个空的画布,可以使用setBitmap()方法来设置具体的画布 Canvas(Bitmap bitmap):以bitmap对象创建一个画布,则将内容都绘制在Bitma ...
- 树莓派学习笔记 1 -- 硬件的需求以及raspbian系统的安装
树莓派(Raspberry Pi) -- 基于Linux系统的大小只有信用卡大小的卡片式机器. 按照发明者的想法,他是想降低学习程序开发的成本而设计制作的这款产品.你可以理解为一个简陋版的电脑.树 ...
- Dirichlet's Theorem on Arithmetic Progression
poj3006 Dirichlet's Theorem on Arithmetic Progressions 很显然这是一题有关于素数的题目. 注意数据的范围,爆搜超时无误. 这里要用到筛选法求素数. ...
- c# 控制职能运行单一实例,再次运行显示已经运行的实例
有这么个需求,软件只能运行一个实例,软件运行后可以让其隐藏运行 再次运行这个软件的时候就让正在运行的实例显示出来 ================================= 当软件隐藏后没办法 ...
- Google C++测试框架系列:入门
Google C++测试框架系列:入门 原始链接:V1_6_Primer 注 GTest或者Google Test: Google的C++测试框架. Test Fixtures: 这个词实在找不到对应 ...
- 小菜的SharePoint Tips
07. 设计模式应用案例(下) 前文用C#代码实现了Facade模式.Adapter模式.Strategy模式.Bridge模式和Abstract Factory模式解决实际业务需求.本文将继续以C# ...
- WCF/WPF公司内部订餐程序开发
WCF/WPF公司内部订餐程序开发 (服务端篇) 上班的第一天,群里讨论关于订餐的问题,所以想到了要不要自己开发一个公司内部的订餐系统呢?方便公司内部员工的订餐,有了想法就简单的实践了下 . 实现还是 ...
- 在html中使用javascript显示本地图片的
<html> <head> <script type="text/javascript"> function getFullPath(obj){ ...
- 转---高并发Web服务的演变——节约系统内存和CPU
[问底]徐汉彬:高并发Web服务的演变——节约系统内存和CPU 发表于22小时前| 4223次阅读| 来源CSDN| 22 条评论| 作者徐汉彬 问底Web服务内存CPU并发徐汉彬 摘要:现在的Web ...