文档章节

HTML5 Notification通知的使用

IamOkay
 IamOkay
发布于 2014/11/20 16:28
字数 256
阅读 123
收藏 1

在html中使用通知

注意事项,必须在网络环境下打开,也就是说需要在服务器下打开,不能双击打开

<html>
	<head>
	<meta charset="utf-8">
	<title>Notification</title>
	<meta http-equiv="X-UA-Compatible" content="IE=7">
	</head>
	<body>
		
		<button id="notifyBtn">show Notification</button>

		<script type="text/javascript">
		
		document.getElementById('notifyBtn').onclick = new function()
		{
			return function()
			{
				console.log(Notification.Permission);
		        if(window.Notification &&Notification.permission==='granted')
		        {
		        	var info = {
		        		lang:'zh-CN', //语言
		        		body:'你有一条信息',//消息简介
		        		tag:'http://www.baidu.com/s?wd=html5+notification', //相当于通知的id,保证信息的唯一性和禁止重复发送
		        		icon:'http://y0.ifengimg.com/2014/11/19/17134118.jpg'//图片 
		        	};
		            var notification = new Notification('Notification Center',info);

		            if(!!notification)
		            {
		            	notification.onclick = function(evt)
		            	{
		            		var e = evt || window.event;
		            		window.location.href = e.currentTarget.tag;
		            	};
		            	
		            	notification.onshow = function(evt){};
		            	notification.onerror = function(evt){};
		            	notification.onclose = function(evt){};
		            }
		        }
	    	}
	    }

     window.onload = function()
     {
     	 if (window.Notification &&Notification.permission!='granted')
	 	 {
     	    Notification.requestPermission();
     	 }
     }
		</script>

	</body>

</html>


当然,还有另一种比较时尚的写法

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

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

}

输入地址:http://localhost/html5/notification.html

点击之后跳到百度搜索

© 著作权归作者所有

IamOkay

IamOkay

粉丝 198
博文 483
码字总数 403041
作品 0
海淀
程序员
私信 提问
如何使用 HTML5 的 Notification API

HTML5 已经不是什么新玩意儿,每个人都多少听说过一些HTML5的特性。大多数人认为HTML5无非就是一些像是header, footer, nav, article, section等一样新的语义标签而已,但是很多人不知道它有...

彭博
2012/10/28
12.5K
9
浏览器语音桌面通知,Notification API

前言 之前在浏览Youtube时,突然看到浏览器右上角弹出一个通知,点击就就进到了指定视频界面,感觉很是不错,如果加上语音效果结合WebSocket,正好可以用到自己的毕业设计之中。 关于Notific...

金刚小仓
03/08
0
0
desktopnotify - 浏览器notification API调用库

这几天研究了一下浏览器的notification通知API的使用,使用它的好处是,当浏览器不是当前打开的窗口时,如果页面上调用了notification API的话,会在桌面上弹出小窗口显示一条消息。并且这个...

limodou
2013/09/26
0
0
HTML5中的Web Notification桌面通知(右下角提示)

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

祈澈姑娘
2018/04/19
0
0
H5 notification浏览器桌面通知

是HTML5新增的API,用于向用户配置和显示桌面通知。上次在别的网站上看到别人的通知弹窗,好奇之余也想知道如何实现的。实际去查一下发现并不复杂,且可以说比较简单,故写篇博客分享给大家,...

OBKoro1
02/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何使用 rsync 备份 Linux 系统的一些介绍

备份一直是 Linux 世界的热门话题。回到 2017,David Both 为 Opensource.com 的读者在使用 rsync 备份 Linux 系统方面提了一些建议,在这年的更早时候,他发起了一项问卷调查询问大家,在 ...

xiangyunyan
33分钟前
0
0
二进制位操作

单片机,或者一些模块的设置操作,都是由一个字节数据来完成,每位各有定义。就需进行位操作来组合需要的数字结果。 以JavaScript为例,编写位操作。 我们期望得到这样一个二进制数:0101101...

format
46分钟前
3
0
聊聊中国的通信行业:从“七国八制”到“中华”脊梁

本期文章和大家一起来聊一聊我曾经从事过的通信行业吧。最近各方面信息的泛滥,包括和华为的同学聊天,自己确实也感慨颇多。想想我自己本科主修通信工程,研究生再修信息与通信工程,从本科开...

CodeSheep
今天
7
0
MDK:ARM M451M:exceed the range of code meory, continue to erase or not?

问题: 代码空间超限 几天前就遇到:exceed the range of code meory, continue to erase or not? 如下所示: 解决过程 开始以为中MDK软件的128KB限制,如是就不能生成HEX文件,应该链接时有提...

SamXIAO
今天
1
1
OSChina 周六乱弹 —— 因违反《中华人民共和国治安管理处罚法》第四十四条之规定

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @xiaoshiyue :#今日歌曲推荐# 惊艳分享谷微的单曲《安守本份》(@网易云音乐) 《安守本份》- 谷微 手机党少年们想听歌,请使劲儿戳(这里) ...

小小编辑
今天
653
14

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部