Notification HTML5新属性，复制代码创建HTML文件，浏览器查看效果

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>桌面通知</title>
  6.      <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
  7.  </head>
  8.  <body>
  9.      <button onclick="show_notification('新消息', '开局一把枪一条狗，装备全靠捡！')">显示通知</button>
  10.  
  11.      <script>
  12.          function show_notification(title, msg) {
  13.              var Notification = window.Notification || window.mozNotification || window.webkitNotification;
  14.              var data = {
  15.                  body: msg, // 消息内容
  16.                  icon: 'https://gss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/a2f3c8cbb2bbc4dcccabd7d4cbbdb0a1c23e' // 消息图标
  17.              };
  18.  
  19.              if(Notification){ // 检测是否支持桌面通知
  20.                  if(Notification.permission == "granted") { // 已经允许通知
  21.                      var instance = new Notification(title, data);
  22.                      instance.onclick = function() { // 点击事件
  23.                          alert('你点击了消息弹框！');
  24.                          console.log('onclick');
  25.                          instance.close();
  26.                      };
  27.                      instance.onerror = function() { // 错误
  28.                          console.log('onerror');
  29.                      };
  30.                      instance.onshow = function() { // 打开事件
  31.                          console.log('onshow');
  32.                      };
  33.                      instance.onclose = function() { // 关闭事件
  34.                          console.log('onclose');
  35.                      };
  36.                  }else{ // 第一次询问或已经禁止通知(如果用户之前已经禁止显示通知，那么浏览器不会再次询问用户的意见，Notification.requestPermission()方法无效)
  37.                      Notification.requestPermission(function(status) {
  38.                          if(status === "granted"){ // 用户允许
  39.                              var instance = new Notification(title, data);
  40.                              instance.onclick = function() {};
  41.                              instance.onerror = function() {};
  42.                              instance.onshow = function() {};
  43.                              instance.onclose = function() {};
  44.                          }else{ // 用户禁止
  45.                              return false
  46.                          }
  47.                      });
  48.                  }
  49.              }else{
  50.                  alert('浏览器不支持桌面通知！');
  51.              }
  52.  
  53.          }
  54.  
  55.      </script>
  56.  </body>
  57.  </html>

HTML5 桌面消息提醒的更多相关文章

  1. 【Html5】Html5新特性Notification实现桌面消息推送（2016-05-25）

    序:最近工作使用WorkTile,发现使用Chrome浏览器的时候如果有任务下发给我则会在桌面右下角提示(当前浏览器为最小化模式).感觉这个东西蛮有意思的,感觉可以给用户更好的体验,于是乎就查询了一下 ...

  2. HTML5桌面通知：notification

    最近由于公司业务需要,领导要求IM消息有像网页微信那样有新消息桌面右下角弹出一个提示框的效果!由于自己才疏学浅,一时还没明白微信是怎么实现的!所以只能问百度(因为懒得FQ)咯! 在网上搜索了N久,心都 ...

  3. HTML5新特性[ Notifications ] 桌面消息

    在执行完以上代码后,我们就成功地创建了一个消息框实例,在Chrome下面它最终会显示成这样: 到这里我们已经成功了一半,但能不能正确地显示出这个消息框,最终还取决于用户的授权.鉴于浏览器的安全机制,只 ...

  4. HTML5 桌面通知：Notification API

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

  5. 使用SignalR实现消息提醒

    Asp.net SignalR是微软为实现实时通信的一个类库.一般情况下,SignalR会使用JavaScript的长轮询(long polling)的方式来实现客户端和服务器通信,随着Html5中W ...

  6. [Asp.net 开发系列之SignalR篇]专题六：使用SignalR实现消息提醒

    一.引言 前面一篇文章我介绍了如何使用SignalR实现图片的传输,然后对于即时通讯应用来说,消息提醒是必不可少的.现在很多网站的都有新消息的提醒功能.自然对于SignalR系列也少不了这个功能的实现 ...

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

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

  8. javascript-浏览器消息提醒

    如何让用户在浏览器最小化的状态下也能及时的收到消息提醒呢? 这个问题作为webRd是要正面面对的. 大约可分两种场景:一种是类似桌面通知的形式还有一种是类似QQ提醒(在系统任务栏闪烁随后高亮);接下来 ...

  9. PHP实现RTX发送消息提醒

    RTX是腾讯公司推出的企业级即时通信平台,大多数公司都在使用它,但是我们很多时候需要将自己系统或者产品的一些通知实时推送给RTX,这就需要用到RTX的服务端SDK,建议先去看看RTX的SDK开发文档( ...

随机推荐

  1. 490 - Rotating Sentences

     Rotating Sentences  In ``Rotating Sentences,'' you are asked to rotate a series of input sentences ...

  2. purescript 基本试用

    安装环境 安装预编译文件 https://github.com/purescript/purescript/releases 配置环境变量: export PATH=$PATH:/Users/dalo ...

  3. sysstat工具

    sysstat工具可以监控系统的IO,CPU,SWAP,LOAD,NETWORK,DISK 安装后,系统会生成定时任务脚本 路径:/etc/cron.d/sysstat 内容: # Run syste ...

  4. FastAdmin 环境变量 env 配置

    FastAdmin 环境变量 env 配置 目前 FastAdmin 支持环境变量 env 配置. 目前支持以下环境变量 app.debug app.trace database.type datab ...

  5. 3——FFMPEG之解复用器-----AVInputFormat（转）

    1. 数据结构: AVInputFormat为FFMPEG的解复用器对象,通过调用av_register_all(),FFMPEG所有的解复用器保存在以first_iformat为链表头的链表中,且还 ...

  6. 剪贴板增强---Kawvin增强剪贴板_V2.0

    #Persistent SetWorkingDir,%A_ScriptDir% ;设置工作目录 #MaxThreadsPerHotkey ;最大热键数量 #NoEnv ;#Warn #SingleIn ...

  7. 转转转！！Spring MVC控制器用@ResponseBody声明返回json数据报406的问题

    本打算今天早点下班,结果下午测试调试程序发现一个问题纠结到晚上才解决,现在写一篇博客来总结下. 是这样的,本人在Spring mvc控制层用到了@ResponseBody标注,以便返回的数据为json ...

  8. Asp.netMVC中地址后缀使用.html，jsp等404错误解决

    asp.net mvc 默认的地址路径url都是没有后缀的比如 www.a.com/aa/bb 等 如果要是www.a.com/aa/bb.html需要专门写路由. 根据我之前的经验,mvc的路由是相 ...

  9. (2/24) 快速上手一个webpack的demo

    写在前面:该部分的安装都是基于windows系统的,且此处的webpack的版本为:3.6.0. 1.安装webpack 1.1 安装方法: 用win+R打开运行对话框,输入cmd进入命令行模式.然后 ...

  10. Gitlab 社区版安装部署和维护指南

    因为我的个人网站 restran.net 已经启用,博客园的内容已经不再更新.这篇文章是在 Gitlab 7.4 的环境下配置的,相关内容可能已经过时. 后续做了一次迁移,将 Gitlab 升级到了 ...