|
|
序：最近工作使用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();
}
});
});
|
|
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
淘帖
顶
踩
