概述

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实现浏览器通知功能的更多相关文章

  1. js实现浏览器打印功能

    最近接触到一个新需求,实现打印机打印小票的功能.打的一桌子小票(惭愧),不过也基本满足了业务上的需求,现在分享一下如何实现(好记性不如烂笔头) 先上代码 // 布局代码 <div id=&quo ...

  2. H5 _浏览器通知功能使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. js判断浏览器类型(手机和电脑终端)

    工作中经常会用到通过js来判断浏览器的功能!今天这里通过js来判断浏览器是来自移动设备还是pc设备! 代码如下: var browser={ versions:function(){ var u = ...

  4. js屏蔽浏览器(IE和FireFox)的刷新和右键等功能

    //一.js屏蔽浏览器(IE和FireFox)的刷新功能 document.onkeydown=function() { if ((window.event.keyCode==116)|| //屏蔽 ...

  5. iNotify.js通知JS 实现浏览器的 title 闪烁、滚动、声音提示、chrome、Firefox、Safari等系统通知。

    https://github.com/jaywcjlove/iNotify     JS 实现浏览器的 title 闪烁.滚动.声音提示.chrome.Firefox.Safari等系统通知. 这是重 ...

  6. js禁止浏览器页面后退功能

    js禁止浏览器页面后退功能: <script> $(function(){ ) { //防止页面后退 history.pushState(null, null, document.URL) ...

  7. JS 获取浏览器和屏幕宽高等信息代码

    JS 获取浏览器和屏幕宽高等信息. 网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:doc ...

  8. js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop。(转)

    js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop. 分类: js.jquery.ext.js技术2011 ...

  9. ASP.NET MVC 4 RC的JS/CSS打包压缩功能 (转载)

    ASP.NET MVC 4 RC的JS/CSS打包压缩功能 打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载 ...

随机推荐

  1. NET开发面向对象2

    面向对象 (2) 继续上一篇<ASP.NET开发,从二层至三层,至面向对象>http://www.cnblogs.com/insus/p/3822624.html .我们了解到怎样把自己的 ...

  2. Jqury笔记

    1.  --------------- -var aa = new Array(); aa.push(1); alert(aa[0]); var aa=[];也表示一个数组: ------------ ...

  3. 无法识别的配置节 applicationSettings

    在.NETFramework2.0中,如果发布的虚拟目录程序引用了外部的webservice访问接口,配置文件会出现下边的applicationSettings节点,如 但是访问应用程序时候,可能会出 ...

  4. Windows Store 应用

    使用 Project Siena 生成一个 Windows Store 应用   继 App Studio 之后微软又一力作 Project Siena [Win8 应用神器]给初学开发 或 对 Wi ...

  5. const 还是 static readonly

    到底是 const 还是 static readonly   真的一样? const 和 static readonly 常在程序中用来声明常量,调用方法也没有什么不同,他们真的一样吗?我们可以做个试 ...

  6. [转]Intercepting the App Store's Traffic on iOS

    Source:https://nabla-c0d3.github.io/blog/2013/08/20/intercepting-the-app-stores-traffic-on-ios/ TL;D ...

  7. 新的IRepository接口+搜索和排序解耦(+基于Castle实现)

    新的IRepository接口+搜索和排序解耦(+基于Castle实现) 经过了上篇IRepository和IRepository<T>的讨论[文章地址为:http://www.cnblo ...

  8. IceMx.Mvc 我的js MVC 框架 二、视图的数据绑定

    介绍 本人菜鸟,一些自己的浅薄见解,望各位大神指正. 本框架有以下优点 1.简单(调用简单.实现简单.不过度设计) 2.视图.控制器.模型分离(分离对于维护十分有必要) 3.组件化(每一个mvc模块儿 ...

  9. phantomjs初次认识

    phantomjs初次认识 最近没什么重要的任务,就抽空看了看项目组爬虫小组的代码,因为我们的爬虫主要是以python的scrapy框架为主,看起来比较方便.在看代码的时候看到一个叫phantomjs ...

  10. urllib 源码小剖

    urllib 源码小剖 urllib 是 python 内置的网络爬虫模块,如果熟悉 python 一定能很快上手使用 urllib. 写这篇文章的目的是因为用到了它,但因为用的次数较多,又或者是具体 ...