文档章节

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 不可限量的发展前景

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

晨曦之光
2012/03/09
0
0
HTML5和CSS3开发工具资源汇总

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

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

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

半指温柔乐
01/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JS:异步 - 面试惨案

为什么会写这篇文章,很明显不符合我的性格的东西,原因是前段时间参与了一个面试,对于很多程序员来说,面试时候多么的鸦雀无声,事后心里就有多么的千军万马。去掉最开始毕业干了一年的Jav...

xmqywx
今天
0
0
Win10 64位系统,PHP 扩展 curl插件

执行:1. 拷贝php安装目录下,libeay32.dll、ssleay32.dll 、 libssh2.dll 到 C:\windows\system32 目录。2. 拷贝php/ext目录下, php_curl.dll 到 C:\windows\system32 目录; 3. p...

放飞E梦想O
今天
0
0
谈谈神秘的ES6——(五)解构赋值【对象篇】

上一节课我们了解了有关数组的解构赋值相关内容,这节课,我们接着,来讲讲对象的解构赋值。 解构不仅可以用于数组,还可以用于对象。 let { foo, bar } = { foo: "aaa", bar: "bbb" };fo...

JandenMa
今天
1
0
OSChina 周一乱弹 —— 有人要给本汪介绍妹子啦

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享水木年华的单曲《中学时代》@小小编辑 手机党少年们想听歌,请使劲儿戳(这里) @须臾时光:夏天还在做最后的挣扎,但是晚上...

小小编辑
今天
18
4
centos7安装redis及开机启动

配置编译环境: sudo yum install gcc-c++ 下载源码: wget http://download.redis.io/releases/redis-3.2.8.tar.gz 解压源码: tar -zxvf redis-3.2.8.tar.gz 进入到解压目录: cd redis-3......

hotsmile
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部