<!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. 开发一个项目之ES2015+

    变量的解构赋值 任何部署了 Iterator 的对象都可 for of 循环(数组.Set.Map.某些类似数组的对象(arguments对象.DOM NodeList 对象).Generator 对 ...

  2. Spring框架-IOC和AOP简单总结

    参考博客: https://blog.csdn.net/qq_22583741/article/details/79589910 1.Spring框架是什么,为什么,怎么用 1.1 Spring框架是 ...

  3. Linux安装Jdk Tomcat MySQL

    Jdk安装 Tomcat安装 Mysql安装 Jdk安装 官网下载 http://www.oracle.com/technetwork/java/javase/downloads/index.html ...

  4. 微信中音乐播放在ios不能自动播放解决

    在微信中,ios手机下面音乐被自动禁掉无法自动播放,我们可以执行触发body上的元素,自动进行播放. //音乐 var x = document.getElementById("myAudi ...

  5. 项目Alpha冲刺（团队）-第二天冲刺

    格式描述 课程名称:软件工程1916|W(福州大学) 作业要求:项目Alpha冲刺(团队)-代码规范.冲刺任务与计划 团队名称:为了交项目干杯 作业目标:描述第二天冲刺的项目进展.问题困难.心得体会 ...

  6. 关于form-checkbox 必填项无效的错误

    校验规则要写在一个form里 检查data,给个默认值. 否则刚进去错误提示不显示. 其次,要加 type 类型,注意大小写 触发类型为 change .

  7. eclipse中jetty插件安装

    注:本文来源于:<eclipse中jetty插件安装> 一.eclipse中jetty插件安装: 打开eclipse,依次点击菜单Help->Eclipse Marketplace, ...

  8. Python安装xlrd和xlwt的步骤以及使用报错的解决方法

    一.安装xlrd和xlwt功能模块步骤 1.使用python -V查看python的版本号,并查看python安装环境,是否安装成功:   2.可以通过官网(python官网:https://pypi ...

  9. Django—Form、ModelForm

    一.Form form.py from django import forms from django.core.exceptions import ValidationError from djan ...

  10. 树链剖分——模板题hdu3966

    #include<bits/stdc++.h> using namespace std; #define ll long long #define maxn 50005 ]; int he ...