<!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. L1-Day8

    1.他就是我昨天见的那个人. [我的翻译]He is a man who I saw him yestorday. [标准答案]He is the man (who(m) /that) I saw y ...

  2. mysql 重置密码

    mysql 重置密码,跳过登录修改密码: # centos 上mysql 已经改名了,启动服务的时候注意是mariadb 了!!!!! # systemctl stop mariadb # syste ...

  3. pythonのdjango 在控制台用log打印操作日志

    在Django项目的settings.py文件中,在最后复制粘贴如下代码: LOGGING = { 'version': 1, 'disable_existing_loggers': False, ' ...

  4. Python 自然语言处理（1）中文分词技术

    中文分词技术 中文自动分词可主要归纳为“规则分词”“统计分词”和“混合分词”,规则分词主要是通过人工设立词库,按照一定方式进行匹配切分,实现简单高效,但对新词很难进行处理,统计分词能够较好应对新词发现 ...

  5. 2018-2019-2 网络对抗技术 20165325 Exp2 后门原理与实践

    2018-2019-2 网络对抗技术 20165325 Exp2 后门原理与实践 实验内容(概要): (1)使用netcat获取主机Shell,cron启动 首先两个电脑(虚拟机)都得有netcat, ...

  6. 【译】索引进阶（十一）：SQL SERVER中的索引碎片【上篇】

    原文链接:传送门. 第十章节我们分析了索引的内部结构.有了这些关于索引结构的知识,我们便可以分析索引碎片了:其产生的原因,如何防止,以及何时可以不去关注它们. 一些背景知识 / 复习 以下知识对于理解 ...

  7. 项目Alpha冲刺（2/10)

    1.项目燃尽图 2.今日进度描述 项目进展 完成数据库和服务器的连接部分,完成了一些应用的基本功能. 问题困难 第一次使用服务器,配置环境部署项目都花了很长时间,学习中存在许多问题. 心得体会 应该早 ...

  8. ZOJ 4110 Strings in the Pocket （马拉车+回文串）

    链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=4110 题目: BaoBao has just found two s ...

  9. 通过hook实现禁止shift+delete快捷键

    实现全局hook必须要将hook代码封装在dll里,所以此程序有两个文件:noShiftDeleteHook.dll和noShiftDelete.exe noShiftDeleteHook.dll / ...

  10. 51nod1236 序列求和 V3

    这题炒鸡简单,只要第一步想对了后面顺风顺水QWQ(然鹅我没想到) 前置芝士: 斐波那契数列通项公式 等比数列求和公式 二项式定理 这题要求的就是 \(\sum_{i=1}^n Fib(i)^k\) , ...