H5的Notification特性

H5的Notification特性 - Web的桌面通知功能

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>H5的Notification-Web的桌面通知功能</title><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type='text/javascript'></script>
</head>
<body><div class="row"><div class="col-md-12"><button id="showNoti">点击通知</button></div>
</div><script>var instanceNotification = Notification || window.Notification;console.log(instanceNotification);if (instanceNotification) {var permissionNow = instanceNotification.permission;if (permissionNow === 'granted') {//允许通知creatNotification();} else if (permissionNow === 'default') {setPermission();} else if (permissionNow === 'denied') {console.log('用户拒绝了你!!!');}  else {setPermission();}}function setPermission() {//请求获取通知权限instanceNotification.requestPermission(function (PERMISSION) {if (PERMISSION === 'granted') {console.log('用户允许通知了!!!');creatNotification();} else {console.log('用户拒绝了你!!!');}});}function creatNotification() {if (!window.Notification) {alert("浏览器不支持通知！");return false;}console.log(window.Notification.permission);if (window.Notification.permission != 'granted') {console.log('用户未开启通知权限!!!');return false;}var instanceNotification = new Notification("您有一条订单消息，请及时处理！", { "icon": "", "body": "快点击处理吧!","requireInteraction":true });instanceNotification.onshow = function () {console.log("显示通知");//3s后自动关闭通知setTimeout(function () {instanceNotification.close()}, 3*1000);};instanceNotification.onclick = function () {alert("打开页面");window.open("/note");instanceNotification.close();};instanceNotification.onclose = function () {console.log("通知关闭");};instanceNotification.onerror = function () {console.log('错误');};}$(function () {$("#showNoti").click(function () {creatNotification();})});//设置一个定时器，每隔5分钟进行一次通知setInterval("creatNotification()",5*60*1000);
</script>
</body>
</html>

H5的Notification特性相关推荐

H5的Notification特性 - Web的桌面通知功能
本文为joshua317原创文章,转载请注明:转载自joshua317博客 https://www.joshua317.com/article/49 H5的Notification特性 - Web的桌 ...
[html] H5的哪些特性需要https支持呢？
[html] H5的哪些特性需要https支持呢? service workers 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起 ...
H5的新特性及API详解（很惊人）
H5的新特性及API详解(很惊人) 2017-01-20 17:00 4057人阅读评论(0) 收藏举报分类: h5(11) js函数(64) js技巧(15) 版权声明:本文为博主原创 ...
H5 Web Notification桌面推送消息
H5 Web Notification桌面推送消息由于这两天公司项目刚好做到一个需要实时桌面推送的功能,就像平时QQ,微信消息推送那种,这个时候我们就可以用到HTML5 Web Notificati ...
H5的新特性及部分API详解
h5新特性总览移除的元素纯表现的元素: basefont.big.center.font等对可用性产生负面影响的元素: frame.frameset.noframes 新增的API 语义: 能 ...
H5,C3新特性，你值得拥有
HTML5新标签与特性文档类型设定 document HTML: sublime 输入 html:4s XHTML: sublime 输入 html:xt HTML5 sublime 输入 html ...
H5的新特性(详细汇总)
1. 拖拽释放(Drapanddrop)APIondrop 拖放是一种常见的特性, 即抓取对象以后拖到另一个位置在HTML5中, 拖放是标准的一部分, 任何元素都能够拖放 2. 自定义属性data- ...
让低版本IE兼容H5+CSS3新特性的方法
主要是针对ie6 7 8对支持和让老浏览器支持html5+css3的一些js脚本.我也不知道为什么叫腻子脚本,反正书上是这么翻译的. html5shiv.js(www.code.google.com/ ...
H5 新增那些特性:
1: 新增语义化标签HTML5 新增的语义化标签主要有:<article> <section> <nav> <aside> <footer> ...

H5的Notification特性

H5的Notification特性相关推荐

最新文章

热门文章