<!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的re模块中search与match的区别

    1.search和match: search:在整个字符中匹配,如果找不到匹配的就返回None match:在字符串开始位置匹配如果不匹配就返回None 2.效率对比: search: match:

  2. 什么时候Python的List，Tuple最后一个Item后面要加上一个逗号

    为什么看Python的代码,有时候会在数据结构的最后一项末尾加上逗号.直接来看,这个逗号很多余. 根据PEP81的解释: Trailing commas are usually optional, e ...

  3. linux下动态链接库(.so)的显式调用和隐式调用

    进入主题前,先看看两点预备知识. 一.显式调用和隐式调用的区别 我们知道,动态库相比静态库的区别是:静态库是编译时就加载到可执行文件中的,而动态库是在程序运行时完成加载的,所以使用动态库的程序的体积要 ...

  4. Vue + Element UI项目初始化

    1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...

  5. NodeJS Addon 多线程通信

    某个产品的Mac客户端计划基于electron实现,因为现有SDK有C API,原理上用NodeJS Addon来封装成JS API就可使用了.但涉及到与Addon多线程交互,翻找资料没能找到到底该怎 ...

  6. OpenStack--ntp组件时间同步服务

    作用:ntp主要是用于对计算机的时间同步管理操作 环境: 服务端: 192.168.245.172 客户端: 192.168.245.171 时间是对服务器来说是很重要的,一般很多网站都需要读取服务器 ...

  7. 网络流24题——骑士共存问题 luogu 3355

    题目描述:这里 从这里开始,我们涉及到了一个新的问题:最小割问题 首先给出一些定义(本人根据定义自己口胡的): 一个流网络中的一个割是一个边集,使得割掉这些边集后源点与汇点不连通 而最小割问题就是一个 ...

  8. python3 切片

    一.切片的目的:获取多个元素 能够进行切片的对象有:字符串.列表.元组 语法:  object[start_index:end_index:step]     以下是创建一个列表 a = [0,1,2 ...

  9. Python之MySQL基础

    一.存储引擎 1.1  什么是存储引擎 MySQL中的数据通过不同的技术存储再文件或者内存中,每种技术有不同的存储机制,索引技巧,锁定水平,并且提供不同的能力,而实现这些技术的我们就称之为存储引擎 1 ...

  10. EF core的模型映射

    在EF core里,可以通过实现IEntityTypeConfiguration来进行映射. 一.官网文档 https://docs.microsoft.com/en-us/ef/core/what- ...