文档章节

HTML5 桌面通知

bzbc
 bzbc
发布于 2016/06/24 09:06
字数 298
阅读 17
收藏 1

Notification

Properties

title:"标题:"body:"内容"icon:"图片地址"C/em%3>tag:"1"// 通知框ID,相同id可替换,而不是出现新的通知框lang:""// 语言dir:"auto"// 文字方向

new Notification('别动神仙说:', {
  body: '这里是body',
  icon: 'http://q4.qlogo.cn/g?b=qq&k=icUjVAN5Ja7BCDQ1ICl8Svw&s=40',
  tag: 1
});

onshow: null // 显示通知框时调用onclick: null // 点击通知框时调用onclose: null // 点击通知框关闭按钮时调用onerror: null

例如实现通知弹出一段时间后自动关闭

var notification = new Notification('标题');
notification.onshow = function () {
  setTimeout(function () {
    notification.close();
  }, 3000);
}

Notification.permission 有三种状态

  • default:未设置过为这个状态,通过Notification.requestPermission()可以询问用户是否允许通知
  • granted:用户点击允许后的状态
  • denied: 用户点击拒绝后的状态,通知框不可用

Methods

Notification.requestPermission()popover requesting for the user’s permission 一般在Notification.permission === 'default'时,用户通过点击等操作调用

document.onclick = function() {
  Notification.requestPermission()
}
使用回调

 

Notification.requestPermission(function (permission) {
  // 可在确认后直接弹出
  if (permission === 'granted') {
    var notification = new Notification('弹窗');
  }
});

Notification.close() 通知框关闭

function notify() {
  if (!("Notification"in window)) {
    alert("This browser does not support desktop notification");
    return;
  }

  if (Notification.permission ==="granted") {
    var notification = new Notification("Hi there!");
  }
  else if (Notification.permission === 'default') {
    Notification.requestPermission(function (permission) {
      if (permission ==="granted") {
        var notification = new Notification("Hi there!");
      }
    });
  }
}

© 著作权归作者所有

共有 人打赏支持
bzbc
粉丝 1
博文 12
码字总数 1503
作品 0
深圳
HTML5中的Web Notification桌面通知(右下角提示)

html5桌面通知(Web Notifications)对于需要实现在新消息入线时,有桌面通知效果的情况下非常有用,在此简单介绍一下这个html5的新属性。通过Web Notifications(桌面通知系统),网站可以在用...

祈澈姑娘
04/19
0
0
【Cloud Foundry 应用开发大赛】todolist,日常管理应用

应用名称:todolist 应用URL地址:http://todolist.cloudfoundry.com/ 测试账号 test@test.com testtest 应用说明及使用场景: 用于日常随手记录,合理的安排会帮你更高效的生活。 年底工作事...

lanx
2013/01/23
0
25
HTML5和CSS3开发工具资源汇总

HTML5和CSS3已经开始彻底变革全世界的Web前端开发和Web设计发展格局,因为他们给这个领域带来了太多太多令人惊奇的新特性!我用大量时间学习了HTML5和CSS3技术,它们的动画、圆角等特效会令你...

晨曦之光
2012/03/09
0
0
HTML5 不可限量的发展前景

现在的HTML5就像当年崭露头角时的Ajax,有人在做,但不知道叫它什么。最近,苹果在HTML5上大做文章,而著名的Web设计师Eric Meyer则提出了Web Stacks的概念。Alex Kessinger是Yahoo的一名前端...

晨曦之光
2012/03/09
0
0
第139天:详解cookie、 sessionStorage 和localStorage

1.cookie:存储在用户本地终端上的数据。有时也用cookies,指某些网站为了辨别用户身份,进行session跟踪而存储在本地终端上的数据,通常经过加密。一般应用最典型的案列就是判断注册用户是否...

半指温柔乐
01/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

关于网站恶意注册会员

网站发生恶意注册会员,有图形验证码 ,和短信验证码 但是还是有大量恶意注册: session 和 cookie都是可以随便伪造的。 验证码有打码平台。 短信验证有短信验证平台。 IP限制有虚拟拨号/VP...

妖尾巴
27分钟前
0
0
awk命令用法介绍

10月18日任务 9.6/9.7 awk 9.6/9.7 awk命令 head -n2 test.txt|awk -F ':' '{print $1}' head -n2 test.txt|awk -F ':' '{print $0}' awk -F ':' '{print $1"#"$2"#"$3"#"$4}' awk '/oo/ tes......

zgxlinux
28分钟前
0
0
循环

我今天学会了用for循环找出一个数组中的最大值,代码: var rets = [2,4,5,6,7,9,10,15];function arrayMax(arrs) {var max = arrs[0];for(var i = 1,ilen = arrs.length; i < ilen...

墨冥
33分钟前
0
0
10《Java核心技术》之如何保证集合是线程安全的? ConcurrentHashMap如何实现高效地线程安全?

一、提出问题 之前我们一起讨论过两讲 Java 集合框架的典型容器类,它们绝大部分都不是线程安全的,仅有的线程安全实现,比如 Vector、Stack,在性能方面也远不尽如人意。幸好 Java 语言提供...

飞鱼说编程
37分钟前
2
0
SpringBoot 整合 kafka 实现组订阅模式

SpringBoot 整合 kafka 实现组订阅模式: 工程结构图 消息生产者pom.xml配置 <?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xml......

泉天下
42分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部