最近由于公司业务需要，领导要求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的更多相关文章

  1. html5桌面通知,notification的使用,右下角出现通知框

    1先判断浏览器是否支持:window.Notification 2判断浏览器是否开启提示的权限:Notification.permission === 'granted'(如果不允许则设置为允许:No ...

  2. 浏览器桌面通知Notification探究

    首先说明,这篇博文不是科普讲解的,而是立flag研究的,是关于浏览器消息自动推送,就是下面这个玩意: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推 ...

  3. HTML5桌面通知(Web Notifications)实例解析

    先上一段代码,ie不支持,Chrome.fireFox.Opera支持 <!DOCTYPE html> <html> <head> <meta http-eq ...

  4. h5桌面通知Notification

    H5中的桌面通知Notification 前言: 对于一个前端开发者,逛网页总会留意一些新奇的功能,对于上班总会用到Teambition的我,总是能收到Notification...所以今天就来研究下 ...

  5. HTML5桌面通知：notification api

    1. 为什么需要HTML5的桌面通知 传统的桌面通知可以写一个div放到页面右下角自动弹出来,并通过轮询等等其他方式去获取消息并推送给用户.这种方式有个弊端就是:当我在使用京东 进行购物的时候,我是不 ...

  6. HTML5 桌面通知：Notification API

    原文地址:http://blog.gdfengshuo.com/article/23/ 前言 Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是 ...

  7. 介绍一个比较酷东西：HTML5 桌面通知（Notification API）

    Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是脱离浏览器的,即使用户没有停留在当前标签页,甚至最小化了浏览器,该通知信息也一样会置顶显示出来 ...

  8. 轻松让HTML5可以显示桌面通知Notification非常实用

    使用Notification的流程 1.检查浏览器是否支持Notification2.检查浏览器的通知权限3.如果权限不够则申请获取权限4.创建消息通知5.展示消息通知 Notification AP ...

  9. 浏览器桌面通知Notification实践

    一言不合就上图: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推送对不对,这个时chrome浏览器的截图,出现在右下角,其他浏览器的样式可能有些微差 ...

随机推荐

  1. 实验二 简易版C语言文法

    <程序>::=begin<语句串>end <语句串>::=<语句>{;<语句>} <语句>::=<赋值语句> < ...

  2. 为什么匿名内部类参数必须为final类型

    1)  从程序设计语言的理论上:局部内部类(即:定义在方法中的内部类),由于本身就是在方法内部(可出现在形式参数定义处或者方法体处),因而访问方法中的局部变量(形式参数或局部变量)是天经地义的.是很自 ...

  3. jenkins配置

    自动化测试机器172,27.14.22   IP 一.jenkins要先登录——>点击JCF_Automation——>点击左边配置 二.环境变量赋值就不会把进程杀掉

  4. opnet学习过程

    学习opnet有一段时间了,走了 不少弯路,现在,想总结一下,推荐给大家一个比较好的学习过程. 因为英语不太好,所以在开始学opnet时用了很多心思去找中文资料,比如说,一些文档.书.视频等.看文档和 ...

  5. MVC OF UEditor 图片上传- 额外参数 笔记

    最近正巧需要用到UEditor ,因为需求,.需要把上传的图片数据上传到阿里云的OSS与记录图片相关信息到MS SQL中 . 不得已只能翻UEditor的实现代码>_<痛苦. 备忘笔记: ...

  6. BZOJ 2743 树状数组

    不能用分块. #include <bits/stdc++.h> using namespace std; ; struct Info{int l,r,Id;}Q[Maxn]; int a[ ...

  7. css实现隐藏显示

    <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" ...

  8. 黑马----JAVA迭代器详解

    JAVA迭代器详解 1.Interable.Iterator和ListIterator 1)迭代器生成接口Interable,用于生成一个具体迭代器 public interface Iterable ...

  9. GPU渲染和GDI

    要实现这样一段逻辑,用GPU画3D图,用GDI画二维图元,怎么样效率高.相传Vista年代,是这样干的: 硬件渲染的东西在GPU上做完 读回CPU端 把GDI这些用软件渲染 两者混合 拷贝到显存显示 ...

  10. Myeclipse中导入新项目报叹号

    Myeclipse中导入新项目报红色叹号 原因是导入项目中,有的jar路径不对, 在上图中,先把报错的jar移除,之后将JRE开头的那个library移除,最后点击add Library,选择jre. ...