Html5桌面提醒

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5桌面消息提示</title>
<script>
function notify(title,content) {
	if(!title && !content){  
		title = "桌面提醒";  
		content = "您看到此条信息桌面提醒设置成功";  
	}  
	var iconUrl = "1.png";
	if (window.webkitNotifications) {  
		//chrome老版本  
		if (window.webkitNotifications.checkPermission() == 0) {  
			var notif = window.webkitNotifications.createNotification(iconUrl, title, content);  
			notif.display = function() {}  
			notif.onerror = function() {}  
			notif.onclose = function() {}  
			notif.onclick = function() {this.cancel();}  
			notif.replaceId = ‘Meteoric‘;  
			notif.show();  
		} else {  
			window.webkitNotifications.requestPermission($jy.notify);  
		}  
	}  
	else if("Notification" in window){  
		// 判断是否有权限  
		if (Notification.permission === "granted") {  
			var notification = new Notification(title, {  
				"icon": iconUrl,  
				"body": content,  
			});  
		}  
		//如果没权限,则请求权限  
		else if (Notification.permission !== ‘denied‘) {  
			Notification.requestPermission(function(permission) {  
				// Whatever the user answers, we make sure we store the  
				// information  
				if (!(‘permission‘ in Notification)) {  
					Notification.permission = permission;  
				}  
				//如果接受请求  
				if (permission === "granted") {  
					var notification = new Notification(title, {  
						"icon": iconUrl,  
						"body": content,  
					});  
				}  
			});  
		}  
	}  
} 
</script>
</head>
<body>
<button onclick="notify(‘会员提醒‘,‘2个会员等待审核‘);">Show Notification</button>
</body>
</html>
时间: 2024-10-17 05:16:53

Html5桌面提醒的相关文章

关于HTML5的桌面提醒——Notification

说明测试环境如下:IE: 11版本firefox:34版本chrome: 39版本 声明: 百度网上搜索的大部分资料,几乎都是错误的! 几乎千篇一律的都是 要检测浏览器是否支持 “桌面提醒”需要用到如下代码: //判断浏览器是否支持Notificationsfunction supported(){ if(window.webkitNotifications){    alert('浏览器支持Notifications'); } else {    alert('浏览器不支持Notificati

HTML5的桌面提醒消息

function fnShow() { var date = new Date(); var time = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(); Notification.requestPermission(function (perm) { if (perm == "granted") { var notification = new Notif

Chrome桌面提醒功能,兼容新老版本,firefox最新版本也通过

Chrome新版升级api,与w3一致,为了兼容,代码如下: //桌面提醒 function notify(title, content) { if(!title && !content){ title = "桌面提醒"; content = "您看到此条信息桌面提醒设置成功"; } var iconUrl = "/images/send_ok.png"; if (window.webkitNotifications) { //c

浏览器桌面提醒,适用于网站“新消息提醒”

<html> <head> <title>浏览器桌面提醒</title> <script> function notify(title, content) { if(!title && !content){ title = "桌面提醒"; content = "您看到此条信息桌面提醒设置成功"; } var iconUrl = "http://www.zhoupengyu.cn/f

HTML5桌面通知:notification api

1. 为什么需要HTML5的桌面通知 传统的桌面通知可以写一个div放到页面右下角自动弹出来,并通过轮询等等其他方式去获取消息并推送给用户.这种方式有个弊端就是:当我在使用京东 进行购物的时候,我是不知道人人网有消息推送过来给我的,而必须要等我把当前页面切到人人网才知道有消息推送了.这种方式的消息推送它是基于页面存活的, 但是我们需要这么一种策略:无论你在看哪个页面,只要有消息都应该能推送给我看到,这就是webkitNotification要解决的问题. Notification生成的消息不依附

html5桌面通知,notification的使用

1先判断浏览器是否支持:window.Notification 2判断浏览器是否开启提示的权限:Notification.permission === 'granted'(如果不允许则设置为允许:Notification.requestPermission()) 3设置提示的内容:var notification = new Notification('订单提示', { body: "您有新订单:" + data + "" });//Notification(&qu

HTML5 桌面提示

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Desktop Notification</title> </head> <body> <div id="a"></div> <script> var showDekInfo = function () { Not

后盾网VIP教程html5技术课程(38课)

01.html5概述 02.html新增标签和属性(上) 03.html5新增标签和属性(下) 04.html5拖拽列表 05.html5拖拽异步上传文件 06.html5多媒体组件 07.html5自定义多媒体播放控件(上) 08.html5自定义多媒体播放控件(下) 09.html5表单新功能解析(上) 10.html5表单新功能解析(下) 11.html5地理位置定位功能 12.html5本地存储之简单存储 13.html5桌面提醒功能 14.html5本地存储之数据库 15.html5本

nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞

第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Windows程序员的事实). 操作系统 API.操作系统发展到今日,几乎桌面应用的所有功能,都是基于系统API构建的.调用API和语言及技术无关,哪怕是使用汇编.例如(代码来源于网络,本地重新编译): ;我的第一个win32汇编程序 ;一个经典的hello world !程序 ;>>>>&