HTML5桌面通知：notification
最近由于公司业务需要，领导要求IM消息有像网页微信那样有新消息桌面右下角弹出一个提示框的效果！由于自己才疏学浅，一时还没明白微信是怎么实现的！所以只能问百度（因为懒得翻墙）咯！
在网上搜索了N久，心都快碎了，终于在绝望之际一个亮眼的单词出现在了我的面前 -- Notification ！终于发现网页微信是怎么实现的了！
Notification 就是html5的新API，即桌面消息！
var Notification = window.Notification || window.mozNotification || window.webkitNotification;
由于的H5,自然就存在一个浏览器支持问题！ 如上代码，是为了兼容chrome和火狐。这是网友提供的代码，但是，经我自己测试，chrome 并没有window.webkitNotification，火狐也没有window.mozNotification对象。但是它们都有window.Notification对象
经本人亲测，目前chrome、火狐、360，QQ浏览器都能支持！不过，ie不支持，不仅是ie 6\7\8，连ie11\edge都不支持哦！只想对微软“呵呵”！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html5桌面通知</title>
</head>
<body>
<input type="button" value="开启桌面通知" onclick="showNotice('','HTML5桌面消息');">
<script>
function showNotice(title,msg){
var Notification = window.Notification || window.mozNotification || window.webkitNotification;
if(Notification){
Notification.requestPermission(function(status){
//status默认值'default'等同于拒绝 'denied' 意味着用户不想要通知 'granted' 意味着用户同意启用通知
if("granted" != status){
return;
}else{
var tag = "sds"+Math.random();
var notify = new Notification(
title,
{
dir:'auto',
lang:'zh-CN',
tag:tag,//实例化的notification的id
icon:'http://www.yinshuajun.com/static/img/favicon.ico',//通知的缩略图,//icon 支持ico、png、jpg、jpeg格式
body:msg //通知的具体内容
}
);
notify.onclick=function(){
//如果通知消息被点击,通知窗口将被激活
window.focus();
},
notify.onerror = function () {
console.log("HTML5桌面消息出错！！！");
};
notify.onshow = function () {
setTimeout(function(){
notify.close();
},2000)
};
notify.onclose = function () {
console.log("HTML5桌面消息关闭！！！");
};
}
});
}else{
console.log("您的浏览器不支持桌面消息");
}
};
showNotice("","HTML5桌面消息")
</script>
</body>
</html>
requestPermission - 该方法将向用户请求询问显示提示框的权限。返回值有三个：
default
granted
denied
默认为default,就是需要询问！让用户作出选择;
如果选择是则变为 granted,表示允许显示通知；
denied则是禁止显示通知！
var notify = new Notification(title,options) 构造函数，两个参数为title（标题，可设为空，则不显示标题），options为一个对象，有以下几个属性：
dir(文字方向，经测试都不支持)
lang(语言)
body(消息体)
tag(标签)
icon(icon地址) Notification对象还有四个事件：
onshow()
onclick()
onclose()
onerror()
分别在消息显示、被点击、被关闭和出错的时候被触发。下面的例子中完整的展示了这四个事件的使用。通常情况下，只需要处理点击事件就够了，比如点击消息后跳转到某一特定的页面。
例子中：window.focus();//如果通知消息被点击,通知窗口将被激活，即可在其他页面时点击后浏览器切换到我们的页面！ http://www.cnblogs.com/lxshanye/p/3560188.html
http://www.xttblog.com/?p=249
HTML5桌面通知：notification的更多相关文章
- html5桌面通知,notification的使用,右下角出现通知框
1先判断浏览器是否支持:window.Notification 2判断浏览器是否开启提示的权限:Notification.permission === 'granted'(如果不允许则设置为允许:No ...
- 浏览器桌面通知Notification探究
首先说明,这篇博文不是科普讲解的,而是立flag研究的,是关于浏览器消息自动推送,就是下面这个玩意: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推 ...
- HTML5桌面通知(Web Notifications)实例解析
先上一段代码,ie不支持,Chrome.fireFox.Opera支持 <!DOCTYPE html> <html> <head> <meta http-eq ...
- h5桌面通知Notification
H5中的桌面通知Notification 前言: 对于一个前端开发者,逛网页总会留意一些新奇的功能,对于上班总会用到Teambition的我,总是能收到Notification...所以今天就来研究下 ...
- HTML5桌面通知：notification api
1. 为什么需要HTML5的桌面通知 传统的桌面通知可以写一个div放到页面右下角自动弹出来,并通过轮询等等其他方式去获取消息并推送给用户.这种方式有个弊端就是:当我在使用京东 进行购物的时候,我是不 ...
- HTML5 桌面通知：Notification API
原文地址:http://blog.gdfengshuo.com/article/23/ 前言 Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是 ...
- 介绍一个比较酷东西：HTML5 桌面通知（Notification API）
Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是脱离浏览器的,即使用户没有停留在当前标签页,甚至最小化了浏览器,该通知信息也一样会置顶显示出来 ...
- 轻松让HTML5可以显示桌面通知Notification非常实用
使用Notification的流程 1.检查浏览器是否支持Notification2.检查浏览器的通知权限3.如果权限不够则申请获取权限4.创建消息通知5.展示消息通知 Notification AP ...
- 浏览器桌面通知Notification实践
一言不合就上图: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推送对不对,这个时chrome浏览器的截图,出现在右下角,其他浏览器的样式可能有些微差 ...
随机推荐
- mySql的学习心得
不知不觉又到晚上了,总感觉每天的时间有些不过用,总感觉每天都有学不完的东西.但是,让我欣慰的是,还是颇有收获的.今天学习了另一个数据库mysql5的相关知识,下面是有关学习内容(php文件): < ...
- MyBatis中出现Mapped Statements collection does not contain value
引用csdn上一大神的解决方法: 经过排查,解决上述异常的过程如下: 1.确定xml文件中<mapper namespace=""/>中的namespace是否路径正确 ...
- python入门笔记
创建变量 python的变量不需要声明数据类型. >>> fred=100 >>> print (fred) 100 >>> fred 100 创 ...
- jenkins配置
自动化测试机器172,27.14.22 IP 一.jenkins要先登录——>点击JCF_Automation——>点击左边配置 二.环境变量赋值就不会把进程杀掉
- 转载——C++控制台贪吃蛇代码
游戏截图: 以下是3个代码文件: Snake_Class.h文件: 1 #ifndef SNAKE 2 #define SNAKE 3 4 #include<windows.h> 5 #i ...
- PKU 1006
数学问题吧,有兴趣的可以研究一下“中国剩余定理” // 1006.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include < ...
- UE4 Android打包 问题 记录笔记
问题一:error: expression result unused [-Werror,-Wunused-value] 虽然看了输出日志知道了这行沉余代码删掉就行,但是不是很懂这个地方报错意义. 问 ...
- HTTP请求方法
HTTP请求方法 根据HTTP标准,HTTP请求可以使用多种请求方法. HTTP1.0定义了三种请求方法: GET, POST 和 HEAD方法. HTTP1.1新增了五种请求方法:OPTIONS, ...
- 关于JAVA中对字符串与数组求长度的问题
我在学习中发现在求数组或者字符串的长度的时候,用到length的时候,有时候是length,有时候是length(),很是奇怪,于是上API查了一下,发现一些小细节. 首先看看这段代码 public ...
- XML代码生成器——XMLFACTORY 简介（三）
XML代码生成器——XMLFACTORY 简介(三) 这一篇我们讲“类名称”页签 的配置功能,您将了解到:如何为Xml元素指定对应的类名称及脱壳功能. 如果,你没看过这个系列的第一篇文章,请先去看这篇 ...