HTML5实现桌面提醒，类似于QQ邮箱收到新邮件的那种效果
有木有发现新浪微博或者网易邮箱等网站，但有新消息时，即使你的浏览器处于最小化，它也能在桌面右下角弹出消息提醒对话框，这实际上就是利用HTML5桌面提醒功能实现的，实现这一功能的浏览器均以webkit为内核。
点击下面的按钮，看看效果吧。
实现这一功能非常的简单。
第一步:申请授权:
1window.webkitNotifications.requestPermission();
第二步:创建桌面提醒对话框对象
1var popup =window.webkitNotifications.createNotification("icon.png","这是标题","这是内容");
第三步:显示桌面提醒对话框
1popup.show();
好了，这样就搞定了。
看个完整的例子:
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5桌面提醒演示--JAE空间</title>
</head>
<body>
<form>
<input type="button" value="授权" onclick="init();" />
<input type="button" value="显示" onclick="notify();" />
</form>
<script type="text/javascript">
const miao = 5;
function init() {
if (window.webkitNotifications) {
//请求授权
window.webkitNotifications.requestPermission();
}
}
function notify() {
if (window.webkitNotifications) {
//检查是否已经授权
if (window.webkitNotifications.checkPermission() == 0) {
//创建一个桌面提醒对象
var popup = window.webkitNotifications.createNotification("img/png-0015.png","这是标题--JAE空间","这是内容，对话框将在"+miao+"后自动关闭!");
//设置多少秒后对话框自动关闭
popup.ondisplay = function(event) {
setTimeout(function() {
event.currentTarget.cancel();
}, miao * 1000)
}
//显示提醒对话框
popup.show();
} else {
//如果没有授权
alert("请授权");
init();
return;
}
}
}
</script>
</body>
</html>
看截图:
原文链接：http://blog.jaekj.com/archives/954.html
点击下面的按钮，看看效果吧。
实现这一功能非常的简单。
第一步:申请授权:
1window.webkitNotifications.requestPermission();
第二步:创建桌面提醒对话框对象
1var popup =window.webkitNotifications.createNotification("icon.png","这是标题","这是内容");
第三步:显示桌面提醒对话框
1popup.show();
好了，这样就搞定了。
看个完整的例子:
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5桌面提醒演示--JAE空间</title>
</head>
<body>
<form>
<input type="button" value="授权" onclick="init();" />
<input type="button" value="显示" onclick="notify();" />
</form>
<script type="text/javascript">
const miao = 5;
function init() {
if (window.webkitNotifications) {
//请求授权
window.webkitNotifications.requestPermission();
}
}
function notify() {
if (window.webkitNotifications) {
//检查是否已经授权
if (window.webkitNotifications.checkPermission() == 0) {
//创建一个桌面提醒对象
var popup = window.webkitNotifications.createNotification("img/png-0015.png","这是标题--JAE空间","这是内容，对话框将在"+miao+"后自动关闭!");
//设置多少秒后对话框自动关闭
popup.ondisplay = function(event) {
setTimeout(function() {
event.currentTarget.cancel();
}, miao * 1000)
}
//显示提醒对话框
popup.show();
} else {
//如果没有授权
alert("请授权");
init();
return;
}
}
}
</script>
</body>
</html>
看截图:
原文链接：http://blog.jaekj.com/archives/954.html
