最近由于公司业务需要，领导要求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都不支持哦！只想对微软“呵呵”！

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>html5桌面通知</title>
  6.     </head>
  7.     <body>
  8.         <input type="button" value="开启桌面通知" onclick="showNotice('','HTML5桌面消息');">
  9.         <script>
  10.             function showNotice(title,msg){
  11.                 var Notification = window.Notification || window.mozNotification || window.webkitNotification;
  12.                 if(Notification){
  13.                     Notification.requestPermission(function(status){
  14.                         //status默认值'default'等同于拒绝 'denied' 意味着用户不想要通知 'granted' 意味着用户同意启用通知
  15.                         if("granted" != status){
  16.                             return;
  17.                         }else{
  18.                             var tag = "sds"+Math.random();
  19.                             var notify = new Notification(
  20.                                 title,
  21.                                 {
  22.                                     dir:'auto',
  23.                                     lang:'zh-CN',
  24.                                     tag:tag,//实例化的notification的id
  25.                                     icon:'http://www.yinshuajun.com/static/img/favicon.ico',//通知的缩略图,//icon 支持ico、png、jpg、jpeg格式
  26.                                     body:msg //通知的具体内容
  27.                                 }
  28.                             );
  29.                             notify.onclick=function(){
  30.                                 //如果通知消息被点击,通知窗口将被激活
  31.                                 window.focus();
  32.                             },
  33.                             notify.onerror = function () {
  34.                                 console.log("HTML5桌面消息出错！！！");
  35.                             };
  36.                             notify.onshow = function () {
  37.                                 setTimeout(function(){
  38.                                     notify.close();
  39.                                 },2000)
  40.                             };
  41.                             notify.onclose = function () {
  42.                                 console.log("HTML5桌面消息关闭！！！");
  43.                             };
  44.                         }
  45.                     });
  46.                 }else{
  47.                     console.log("您的浏览器不支持桌面消息");
  48.                 }
  49.             };
  50.             showNotice("","HTML5桌面消息")
  51.         </script>
  52.     </body>
  53. </html>

　　

  1. requestPermission - 该方法将向用户请求询问显示提示框的权限。返回值有三个：
    default
    granted
    denied
    默认为default,就是需要询问！让用户作出选择;
    如果选择是则变为 granted,表示允许显示通知；
    denied则是禁止显示通知！

　

  1. var notify = new Notification(title,options) 构造函数，两个参数为title（标题，可设为空，则不显示标题），options为一个对象，有以下几个属性：
  1. dir(文字方向，经测试都不支持)
    lang(语言)
    body(消息体)
    tag(标签)
    icon(icon地址)
  2.  
  3. Notification对象还有四个事件：
  1. onshow()
    onclick()
    onclose()
    onerror()
    分别在消息显示、被点击、被关闭和出错的时候被触发。下面的例子中完整的展示了这四个事件的使用。通常情况下，只需要处理点击事件就够了，比如点击消息后跳转到某一特定的页面。
    例子中：window.focus();//如果通知消息被点击,通知窗口将被激活，即可在其他页面时点击后浏览器切换到我们的页面！
  2.  
  3. 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. 编写可维护的JavaScript代码

    1.  1)for-in循环用来遍历对象属性.不仅遍历对象的实例属性,还遍历从原型继承来的属性. 所以最好使用hasOwnProperty()方法来过滤. 2) for in循环遍历出的对象属性不能保 ...

  2. JS总结 节点

    nodeName 获取节点名称 元素节点:返回标记名称  属性节点:返回属性名称 文本节点:返回文本#text nodeTyle 获取节点类型 元素节点:返回1 属性节点:返回2 文本节点:返回3 n ...

  3. c# System.Data.OracleClient需要Oracle客户端软件8.1.7或更高版本

    前几天遇到了这个问题,情景是与oracle数据库连接的时候出现的.本机已经安装了客户端,使用toad数据库工具能够与数据库相连进行相关的操作.但是在使用代码进行连接的时候出现了这样的问题.找了好久,都 ...

  4. nexus7 二代 升级 android L

    折腾了半天 ,最后发现其实很简单... 1.装好windows下gdb和bootloader的驱动,注意打开usb debug,另外进入bootloader是开机按电源键和音量减小键,至于要解锁这个想 ...

  5. Intellj IDEA Java随笔

    敲击sout+Tab会出现:System.out.println(); int(-2147483648, 2147483647) 当一个方法类型不是void时,那么我们不仅要考虑它正确时的返回值,错误 ...

  6. Aspose.Cells 首次使用，用到模版填充数据，合并单元格，换行

    Aspose.Cells 首次使用,用到模版填充数据,合并单元格,换行 模版格式,图格式是最简单的格式,但实际效果不是这种,实际效果图如图2 图2 ,注意看红色部分,一对一是正常的,但是有一对多的订单 ...

  7. Discuz 7.0版块横排显示版块图标和版块简介的方法

    Discuz 7.0版块横排显示版块图标和版块简介的方法 最近很多朋友咨询Discuz论坛设置论坛版块横排后,如何设置显示版块图标和简介的问题. 一.显示板块图标 找到templates\defaul ...

  8. Reconstruct Itinerary

    Given a list of airline tickets represented by pairs of departure and arrival airports [from, to], r ...

  9. IIS 7 php 7.0 部署WE MALL

    想在本地环境部署We Mall,本地环境为Win 7+IIS 7+php 7.0 在php manager调用phpinfo ouput()时老是报错: " HTTP 错误 500.19 - ...

  10. SYSLOG审记日志的配置。

    前言 syslog是UNIX系统中提供的一种日志记录方法(RFC3164),syslog本身是一个服务器,程序中凡是使用syslog记录的信息都会发送到该服务器,服务器根据配置决定此信息是否记录,是记 ...