浏览器通知--window.Notification
参考链接:http://blog.csdn.net/guoquanyou/article/details/51726571
Web Notifications是HTML5 的一个特性,目前我知道的有谷歌浏览器和windows edge对它进行了支持
下面是一个简单的示例(注意测试的时候需要把页面发布到浏览器上才会有效果):
<div class="row">
<div class="col-md-12">
<button id="showNoti">显示通知</button>
</div>
</div> <script>
$(function () {
$("#showNoti").click(function () {
if (!window.Notification) {
alert("浏览器不支持通知!");
}
console.log(window.Notification.permission);
if (window.Notification.permission != 'granted') {
Notification.requestPermission(function (status) {
//status是授权状态,如果用户允许显示桌面通知,则status为'granted'
console.log('status: ' + status);
//permission只读属性:
// default 用户没有接收或拒绝授权 不能显示通知
// granted 用户接受授权 允许显示通知
// denied 用户拒绝授权 不允许显示通知
var permission = Notification.permission;
console.log('permission: ' + permission);
});
}
var n = new Notification("您有一条消息!", { "icon": "", "body": "您一分钟后将有好运气" }); n.onshow = function () { console.log("显示通知"); setTimeout(function () { n.close() }, 2000); }; n.onclick = function () { alert("打开相关视图"); window.open("/Home/about"); n.close(); }; n.onclose = function () { console.log("通知关闭"); }; n.onerror = function () { console.log('产生错误'); //do something useful }; }); }); </script>
相关函数:
Notification.requestPermission(callback);--用于取得用户同意
Notification.permission --用户是否同意显示通知,相关取值:
“granted”(状态值:0)表示用户同意消息提醒;“default”(状态值:1)表示默认状态,用户既未拒绝,也未同意;“denied”(状态值:1)表示用户拒绝消息提醒。只有在状态值为0的时候才能够允许消息提醒
new Notification(title, options)
通过new构造,显示通知。
其中title是必须参数,options是可选参数,下面是一些参数的简单说明
lang:提示的语言
bady:提示消息的主体内容。
tag:标记当前通知的标签
icon:就是提示的时候显示的图标
renotify:是否替换之前的通知项
浏览器通知--window.Notification的更多相关文章
- HTML5开启浏览器桌面通知 Web Notification
说明: 1.Chrome要求必须https才可以开启浏览器通知 2.显示图片在本服务器,不支持跨越 3.自定义声音Chrome不播放,Firefox正常播放 代码如下: <!-- /** * @ ...
- notification(浏览器通知)
一.notification简介 Web Notifications是HTML5 的一个特性,目前我知道的有谷歌浏览器和windows edge对它进行了支持,用于向用户配置和显示桌面通知. 二.no ...
- HTML5桌面通知:notification
最近由于公司业务需要,领导要求IM消息有像网页微信那样有新消息桌面右下角弹出一个提示框的效果!由于自己才疏学浅,一时还没明白微信是怎么实现的!所以只能问百度(因为懒得FQ)咯! 在网上搜索了N久,心都 ...
- HTML5桌面通知:notification api
1. 为什么需要HTML5的桌面通知 传统的桌面通知可以写一个div放到页面右下角自动弹出来,并通过轮询等等其他方式去获取消息并推送给用户.这种方式有个弊端就是:当我在使用京东 进行购物的时候,我是不 ...
- js实现浏览器通知功能
概述 Notification API是浏览器的通知接口,用于在用户的桌面(而不是网页上)显示通知信息,桌面电脑和手机都适用,比如通知用户收到了一封Email.具体的实现形式由浏览器自行部署,对于手机 ...
- HTML5 桌面通知:Notification API
原文地址:http://blog.gdfengshuo.com/article/23/ 前言 Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是 ...
- H5 _浏览器通知功能使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 浏览器通知Web Notifications实例页面
HTML代码: <button id="button">有人想加你为好友</button> <p id="text">< ...
- 介绍一个比较酷东西:HTML5 桌面通知(Notification API)
Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是脱离浏览器的,即使用户没有停留在当前标签页,甚至最小化了浏览器,该通知信息也一样会置顶显示出来 ...
随机推荐
- 全面理解虚拟DOM(1)
最近一两年前端最火的技术莫过于 reactjs,angularJS,vuejs,即便你没用过也可能听过,像ReactJS由业界顶尖的互联网公司facebook提出,其本身有很多先进的设计思路,比如页面 ...
- django中实现组合搜索
一.简介 # 组合搜索# 技术方向:自动化,测试,运维,前端# 分类:Python Linux JavaScript OpenStack Node.js GO# 级别:初级 中级 高级 骨灰级 有4张 ...
- coockie 和 session
一.Cookie Cookie的数据是由客户端来保存和携带的,所以称之为客户端技术. 1.属性: name:名称不能唯一确定一个Cookie.路径可能不同. value:不能存中文. path:默认值 ...
- C connect实现Timeout效果(Windows)
int SocketClient::connectTimeOutForWin(SOCKET &connect_fd, const int &timeout, const sockadd ...
- nginx最简安装
在 CentOS 6.2 下安装nginx 一:nginx所需依赖的安装 用yum安装依赖: yum -y install zlib zlib-devel openssl openssl-devel ...
- Kafka各个版本差异汇总
Kafka各个版本差异汇总 从0.8.x,0.9.x,0.10.0.x,0.10.1.x,0.10.2.x,0.11.0.x,1.0.x或1.1.x升级到2.0.0 Kafka 2.0.0引入了线 ...
- 面向对象【day08】:动态导入模块(八)
本节内容 1.概述 2.知识回顾 3.动态导入模块 一.概述 我们之前导入模块都是用import,或者from ... import ....这种模式去导入模块,那如果我们如何实现只用字符串就可以导入 ...
- java io系列11之 FilterOutputStream
FilterOutputStream 介绍 FilterOutputStream 的作用是用来“封装其它的输出流,并为它们提供额外的功能”.它主要包括BufferedOutputStream, Dat ...
- C++回顾day01---<const常量重点>
一:定义常整型数 const int a;(或者int const a;) 不涉及指针 不可改变值(也不可通过指针修改) 二:定义一个指向常整型数的指针 const int* c; 可改指针指向 ...
- Dubbo简易控制中心安装
1. zookeeper安装(单机版):http://www.cnblogs.com/wangfajun/p/5251159.html √ 2. dubbo管控台安装(zookeeper单机版):h ...