<!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. python+redis+kairosdb+cassandra+mysql环境搭建

    环境搭建: python安装: redis安装: 下载.解压.安装 1.wget http://download.redis.io/releases/redis-5.0.0.tar.gz 2.tar ...

  2. POI操作excle

    将根目录下的poi-3.6-20091214.jar和Lib目录下三个通用包 commons-logging-1.1.jar junit-3.8.1.jar log4j-1.2.13.jar拷贝到项目 ...

  3. Spring Cloud 2-Zuul 网关服务(六)

    Spring Cloud  Zuul  1.pom.xml 2.application.yml Application.java 1.pom.xml <!-- zuul 网关服务 --> ...

  4. python 数据分析工具之 numpy pandas matplotlib

    作为一个网络技术人员,机器学习是一种很有必要学习的技术,在这个数据爆炸的时代更是如此. python做数据分析,最常用以下几个库 numpy pandas matplotlib 一.Numpy库 为了 ...

  5. 编译树莓派2代B型OpenWrt固件实现无线路由器及nodogsplash认证功能

    最终功能: 无线路由器的主要功能,网口WAN接入,USB无线网卡AP热点输出,连上wifi之后跳转到认证页面,点击认证方可上网,有效时间10分钟,认证成功之后自动访问指定网址. 文章结尾有编译好的刷机 ...

  6. Linux Input子系统浅析（二）-- 模拟tp上报键值【转】

    转自:https://blog.csdn.net/xiaopangzi313/article/details/52383226 版权声明:本文为博主原创文章,未经博主允许不得转载. https://b ...

  7. docker-compose部署ELK

    本章基于 https://www.cnblogs.com/lirunzhou/p/10550675.html 在此基础上将ELK系统docker-compose.yml化. 其docker-compo ...

  8. Unity简单塔防游戏的开发——敌人移动路径的创建及移动

    软件工程综合实践专题第一次作业 Unity呢是目前一款比较火热的三维.二维动画以及游戏的开发引擎,我也由于一些原因开始接触并喜爱上了这款开发引擎,下面呢是我在学习该引擎开发小项目时编写的一些代码的脚本 ...

  9. java的方法重写 ，多态和关键字 instanceof和final

    package cn.pen; /*final 是一个java的关键字,用于修饰局部变量.属性.方法.类,表示最终的意思. final修饰类表示最终类,无法被继承.public final class ...

  10. java - day007 - 继承(2), 多态,面向对象,抽象类

    继承 新建子类对象是,先新建父类对象,并执行父类的构造方法, 默认执行父类的无参构造放方法 可以 手动调用父类的有参构造 super(参数 ) super super.xxx() 调用父类成员 一般重 ...