<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Notification</title>

 </head>

 <body>

     <div class="content">

         <button id="creatNotification">Creat</button>

         <button id="closeNotification">Close</button>

     </div>

     <script>

         var page = {

             data : {

                 Notification : '',

                 count        : 0

             },

             init : function(){

                 this.bindEvent();

             },

             bindEvent : function(){

                 var _this = this,

                     creatN = document.getElementById('creatNotification'),

                     closeN = document.getElementById('closeNotification');

                 creatN.onclick = function(){

                     _this.creatNotification();

                 }

                 closeN.onclick = function(){

                     _this.closeNotification();

                 }

             },

             /*

                 Notification对象permission属性：

                 default ：用户尚未配浏览器请求显示通知权限。

                 grant   ：有显示通知权限。

                 denied  ：拒绝显示通知权限。

             */

             creatNotification : function(){

                 var _this = this;

                 if(window.Notification.permission === 'granted'){

                     //创建通知

                     _this.data.Notification = new Notification('简单文本通知',{

                         dir  : 'ltr',//通知的文字方向

                         // icon : 'icon',

                         tag  : 'MyID',//值为字符串，指定通知的唯一标识

                         body : '这是第'+ (++_this.data.count) + '通知内容'

                     });

                     //通知被显示

                     _this.data.Notification.onshow = function(){

                         alert('通知被显示');

                     }

                     //通知被关闭

                     _this.data.Notification.onclose = function(){

                         // _this.data.count--;

                         alert('通知被关闭');

                     }

                     //通知被点击

                     _this.data.Notification.onclick = function(){

                         alert('通知被点击');

                     }

                     // onerror 事件

                     _this.data.Notification.onerror = function(e){

                         //e代表被捕捉到的错误对象

                         alert('error')

                     }

                 }

                 else if (window.Notification.permission === 'default'){

                     window.Notification.requestPermission();

                 }

             },

             closeNotification : function(){

                 //close()方法关闭通知

                 this.data.Notification.close();

             }

         }

         window.onload = page.init();

     </script>

 </body>

 </html>

H5 _浏览器通知功能使用的更多相关文章

  1. js实现浏览器通知功能

    概述 Notification API是浏览器的通知接口,用于在用户的桌面(而不是网页上)显示通知信息,桌面电脑和手机都适用,比如通知用户收到了一封Email.具体的实现形式由浏览器自行部署,对于手机 ...

  2. H5外部浏览器直接调起微信——通过url协议 weixin:// 判断是否安装微信及启动微信

    前言: h5分享到微信,h5使用微信支付这些功能,都需要先判断是否安装微信客户端,如果已安装就启动微信,如果没有安装微信,就提示用户前去安装. 我们可以通过访问微信提供的URL协议(weixin:// ...

  3. Flutter实战视频-移动电商-58.购物车_删除商品功能制作

    58.购物车_删除商品功能制作 主要做购物车后面的删除按钮 删除的方法写在provide里面 provide/cart.dart文件 传入goodsId,循环对比,找到后进行移除 //删除单个购物车商 ...

  4. gitlab配置邮件通知功能操作记录

    之前已经介绍了gitlab的部署http://www.cnblogs.com/kevingrace/p/5651402.html但是没有配置邮箱通知功能,今天这里介绍下gitlab安装后的邮箱配置操作 ...

  5. 配置 SQL Server Email 发送以及 Job 的 Notification通知功能

    配置 SQL Server Email 发送以及 Job 的 Notification通知功能 在与数据库相关的项目中, 比如像数据库维护, 性能警报, 程序出错警报或通知都会使用到在 SQL Ser ...

  6. Django error信息邮件通知功能配置部署

    1. 最近QA成为项目的重点,除了突破依赖外部表的阻力开始启用单元测试,还有一点就是对在线的生产服务的错误信息启用这个邮件通知功能,下面简单说一下启用方法: 1.发送邮件账号配置配置: EMAIL_H ...

  7. 学python走过的坑 三 不能实现的浏览器缩放功能

    公司一个项目,在启动web页面时,默认应该是打开项目页面,然后浏览器启动时总是打开一个广告页面,经理让写一个脚本,让电脑每次开机自启浏览器,且加载项目页面.浏览器自启和打开项目页面轻松搞定,这时问题来 ...

  8. 配置 SQL Server 2008 Email 发送以及 Job 的 Notification通知功能

    SQL Server 2008配置邮件的过程就不写了,网上的案例太多了. http://www.cnblogs.com/woodytu/p/5154526.html 这个案例就不错. 主要写下配置完后 ...

  9. cocos2d-js 安卓自定义本地通知功能

    安卓新手,笔记有理解不当的地方望指出,经过几天折腾终于可以实现类似ios的本地通知功能(ios就几行代码),可能有第三方sdk可以方便实现,暂时没去找 思路: 1. startService 和bin ...

随机推荐

  1. re模块 - 正则表达式 疏理(一)

    在网上总是很难找到令自己比较满意的,关于正则表达式的文章.所以决定自己来总结一波,并配上相应的示例. 正则表达式:定义了规则,用来字符串处理. 用途: 1.匹配 - 符合规则的字符串,则认为匹配了. ...

  2. 迭代和JDB

    迭代和JDB 使用C(n,m)=C(n-1,m-1)+C(n-1,m)公式进行递归编程实现求组合数C(m,n)的功能. 源代码 public class Combination { public st ...

  3. Idea中一些常用设置

    idea展开和折叠方法的快捷键 Ctrl+”+/-”,当前方法展开.折叠Ctrl+Shift+”+/-”,全部展开.折叠 idea中也有自定代码块的功能 //region 描述.....业务代码//e ...

  4. ngx_string()错误分析

    #define ngx_string(str) { sizeof(str) - 1, (u_char) str } typedef struct { uint len; u_char* data; } ...

  5. 二十三种设计模式之原型模式的C#实现

    原型模式就是通过拷贝快速创建一个新的对象 本例UML如图 ColorBase [Serializable] public abstract class ColorBase { public int R ...

  6. git(windows)

    windows下比较比较好用的git客户端: 1. msysgit + TortoiseGit(乌龟git) 2. GitHub for Windows 3. Git Extensions

  7. ABP学习之路--切换mysql数据库

    1.添加mysql相关引用 注意,使用最新版本会导数据迁移时出错 2.修改链接字符串: <add name="Default" connectionString=" ...

  8. CF666E Forensic Examination [后缀自动机，线段树合并]

    洛谷 Codeforces 思路 最初的想法:后缀数组+区间众数,似乎并不能过. 既然后缀数组不行,那就按照套路建出广义SAM,然后把\(S\)放在上面跑,得到以每个点结尾会到SAM上哪个节点. 询问 ...

  9. Zygote及System进程启动

    1.  init 根据init.rc 运行 app_process, 并携带‘--zygote' 和 ’--startSystemServer' 参数. 2.  AndroidRuntime.cpp: ...

  10. JSONP方法简单封装

    function myJsonp(url, data, callback) { //参数判断 if (Object.prototype.toString.call(data) == "[ob ...