文档章节

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
码字总数 1553
作品 0
深圳
私信 提问
HTML5中的Web Notification桌面通知(右下角提示)

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

祈澈姑娘
04/19
0
0
Opera 10.53 Beta for Linux/Unix发布

Opera 10.53 for Unix/Linux 重写了大量代码,一度造成开发进度缓慢,现在终于达到了 Beta 阶段,新的 Opera 与桌面环境集成的更好,新一代引擎速度更快,对标准的支持更加完善,也带来了桌面...

红薯
2010/05/04
401
4
【Cloud Foundry 应用开发大赛】todolist,日常管理应用

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

lanx
2013/01/23
0
25
Google豪赌在线软件 HTML5成筹码

在线应用已经成为当今的热点,这种以云计算为技术支撑,SaaS应用为实现模式的新型软件正在不断的发展和壮大。《华尔街日报》网站今日发布评论称,Google正在在线软件领域发起一场豪赌,Googl...

merlin
2009/07/15
312
0
微软、谷歌、Twitter对HTML5地位问题的争论

HTML5是制作下一代Web应用程序的圣杯吗?开发人员应该抛弃浏览器支持在iPhone和安卓等具体设备上运行的客户应用程序吗? 这些问题都是微软、谷歌和Twitter等公司的Web和应用程序设计人员上周四...

红薯
2011/06/28
1K
12

没有更多内容

加载失败,请刷新页面

加载更多

Java 使用 pinyin4j 生成汉字拼音

添加 pinyin4j jar包 <dependency> <groupId>com.belerweb</groupId> <artifactId>pinyin4j</artifactId> <version>2.5.0</version> ......

yh32
19分钟前
0
0
Deepin 安装wireshark抓包工具

一、关于deepin和wireshark deepin目前已经发展到15.8了,开发Android毫无压力,在四个月的使用时间里,已经非常习惯了。目前想处理一些网络问题,因此尝试在deepin上安装一个抓包工具。dee...

IamOkay
今天
6
0
Docker镜像仓库服务-Nexus

建立云原生集群系统,建立自己的私有Docker镜像仓库必不可少。一方面可以加快多节点部署容器镜像的下载速度,另一方面是为了安全(容器里存储有系统所有的信息、包括密码、数据库等等,切记不...

openthings
今天
6
0
127.0.0.1 和 0.0.0.0 地址的区别

1. IP地址分类 1.1 IP地址表示 IP地址由两个部分组成,net-id和host-id,即网络号和主机号。 net-id:表示ip地址所在的网络号。 host-id:表示ip地址所在网络中的某个主机号码。 即: IP-a...

华山猛男
今天
25
0
解决Unknown host 'd29vzk4ow07wi7.cloudfront.net'. You may need to adjust the proxy settings in Gradle.

把 总项目 下的 build.gradle 中的 两个 jcenter() 用 maven{ url ‘http://maven.aliyun.com/nexus/content/groups/public/’} 代替。...

lanyu96
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部