|
序:最近工作使用WorkTile,发现使用Chrome浏览器的时候如果有任务下发给我则会在桌面右下角提示(当前浏览器为最小化模式)。感觉这个东西蛮有意思的,感觉可以给用户更好的体验,于是乎就查询了一下,发现是Html5的新特性。
0x01:IE内核的浏览器还不可以,但在Chrome与Firefox上已经实现了此API。
0x02:代码简单直接看吧
notification.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Html5 桌面消息推送</title>
</head>
<body>
<input type="button" id="btn_Send" value="发送桌面消息" />
<input type="button" id="btn_Close" value="关闭桌面消息" />
<script src="http://c.51hei.com/a/a/g/66136371059279.jpg"></script>
<script src="http://c.51hei.com/a/a/g/66136371028045.jpg"></script>
</body>
</html>
notification.js
var notif; // 消息对象
var i = 0;
$(document).ready(function () {
/* 注册按钮单击事件 */
$('#btn_Send').bind('click', function () {
if (window.Notification) { // 判断浏览器是否支持Notification特性,Chrome与Firefox支持,IE内核暂不支持
if (Notification.permission == 'granted') { // 判断浏览器是否允许此站点发送桌面消息;granted为允许
notif = new Notification('Clown:', {
body: '呆子、在吗?',
icon: 'http://taekwondoshow.com/Images/my_1.jpg',
tag: ++i // ID,如果ID重复则前者会被覆盖,如果ID不重复则一直叠加显示。PS:Chrome最多同时显示3条,Firefox则没有限制。。。
});
notif.onclose = function () { // 当Notification被关闭时触发
alert('消息被关闭了');
};
notif.onclick = function () { // 当Notification被单击时触发
alert('消息被单击了');
}
} else {
Notification.requestPermission();
}
} else {
alert('当前浏览器不支持Notification特性!');
}
});
$('#btn_Close').bind('click', function () {
if (notif) {
notif.close();
}
});
});
|
|