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