js实现浏览器通知功能
来源:互联网 发布:美国农业数据 美元指数 编辑:程序博客网 时间:2024/06/02 06:13
概述
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事件,判断它是否为用户手动关闭。
本篇源自 《阮一峰老师的javascript篇》小篇只是在这里传播一下,绝无抄袭之意,多谢关注~
- js实现浏览器通知功能
- JS实现浏览器的title闪烁、滚动、声音提示、通知
- js实现pc浏览器复制粘贴功能
- js实现桌面通知
- IE浏览器的脚本错误通知功能
- 浏览器+js实现超强的搜索访问功能
- js实现firefox、chrome、ie浏览器复制功能
- js实现复制到剪贴板功能,兼容所有浏览器
- 【原】js实现复制到剪贴板功能,兼容所有浏览器
- JS实现文本复制功能,兼容主流浏览器
- Flash+JS实现跨浏览器复制剪贴板功能
- js实现复制到剪切板功能,兼容所有浏览器
- js实现复制到剪贴板功能,兼容所有浏览器
- js实现复制到剪贴板功能,兼容所有浏览器
- 用JS实现不同浏览器的图片预览功能
- 【原】js实现复制到剪贴板功能,兼容所有浏览器
- 【转】js实现复制到剪贴板功能,兼容所有浏览器
- 用JS实现控制浏览器F12与右键功能
- 底部切换按钮LuseenBottomNavigation
- android 沉浸模式(状态栏透明 跟随布局颜色)
- HOG:从理论到OpenCV实践
- iOS block从浅到深的学习 以及循环引用的问题
- 在shell下使用mysql方法
- js实现浏览器通知功能
- iOS之解决UITableView与背景颜色不一致问题
- iOS提交应用至App Store流程及真机调试 一,证书、配置文件
- 排序算法--插入排序法
- Android apk多渠道 打包
- js render
- JavaScript——Div和Span的区别
- Letter Combinations of a Phone Number
- Java Equals