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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>桌面通知</title>

     <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

 </head>

 <body>

     <button onclick="show_notification('新消息', '开局一把枪一条狗，装备全靠捡！')">显示通知</button>

     <script>

         function show_notification(title, msg) {

             var Notification = window.Notification || window.mozNotification || window.webkitNotification;

             var data = {

                 body: msg, // 消息内容

                 icon: 'https://gss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/a2f3c8cbb2bbc4dcccabd7d4cbbdb0a1c23e' // 消息图标

             };

             if(Notification){ // 检测是否支持桌面通知

                 if(Notification.permission == "granted") { // 已经允许通知

                     var instance = new Notification(title, data);

                     instance.onclick = function() { // 点击事件

                         alert('你点击了消息弹框！');

                         console.log('onclick');

                         instance.close();

                     };

                     instance.onerror = function() { // 错误

                         console.log('onerror');

                     };

                     instance.onshow = function() { // 打开事件

                         console.log('onshow');

                     };

                     instance.onclose = function() { // 关闭事件

                         console.log('onclose');

                     };

                 }else{ // 第一次询问或已经禁止通知(如果用户之前已经禁止显示通知，那么浏览器不会再次询问用户的意见，Notification.requestPermission()方法无效)

                     Notification.requestPermission(function(status) {

                         if(status === "granted"){ // 用户允许

                             var instance = new Notification(title, data);

                             instance.onclick = function() {};

                             instance.onerror = function() {};

                             instance.onshow = function() {};

                             instance.onclose = function() {};

                         }else{ // 用户禁止

                             return false

                         }

                     });

                 }

             }else{

                 alert('浏览器不支持桌面通知！');

             }

         }

     </script>

 </body>

 </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. python下的select模块使用 以及epoll与select、poll的区别

    python下的select模块使用 以及epoll与select.poll的区别 先说epoll与select.poll的区别(总结) 整理http://www.zhihu.com/question ...

  2. WiFi密码破解详细图文教程

    每天都能看到有不少网友在回复论坛之前发布的一篇破解WiFi密码的帖子,并伴随各种疑问.今天流云就为大家准备一篇实战型的文章吧,详细图文从思维CDlinux U盘启动到中文设置,如何进行路由SSID扫描 ...

  3. Visual Studio 2005 自带单元测试

    一 单元测试简介   单元测试是代码正确性验证的最重要的工具,也是系统测试当中最重要的环节.也是唯一需要编写代码才能进行测试的一种测试方法.在标准的开发过程中,单元测试的代码与实际程序的代码具有同等的 ...

  4. Angular 安装

    1.angular安装 npm  install -g angular 2. 显示angular安装路径 npm config ls 3. angular 双向绑定 <!DOCTYPE html ...

  5. Python的学习计划

    整体进度(6-7个月毕业)一.(2月左右)Python基础二.数据库(1-2周)---存储数据和信息(本质上和文件没有区别) 增删改查更方便了三.前端(2周左右)---html.css等等四.框架(2 ...

  6. js基础篇(dom操作，字符串，this等)

    首先我们来看这样一道题 <div id='foo' class='aa bb cc'></div>写出如何判断此div中是否含有aa(注:aa成立,aaa不成立) 首先,我们一 ...

  7. win7 安装 node-sass报错

    由于国内网络问题,所以会导致下载node-sass二进制包失败 只需要在 ~/.npmrc(当前用户家目录下)添加下面一行: sass_binary_site=https://npm.taobao.o ...

  8. PHP实现连接设备、通讯和发送命令的方法

    这篇文章主要介绍了PHP实现连接设备.通讯和发送命令的方法,涉及php基于socket实现设备连接及数据通信的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下   本文实例讲述了PHP实现连接设备 ...

  9. SSH 自动化安装部署遇到的问题

    1. 对于需要添加unknown host的问题可以通过添加: -o StrictHostKeyChecking=no 例如: ssh -o StrictHostKeyChecking=no acco ...

  10. java程序控制KETTLE JOB的执行

    有时候我们想在java程序中触发远程服务器上kettle job的执行,并且获得执行结果.kettle的carte提供了远程执行job和transfer的功能. 我使用的kettle是6.1版本,部署 ...