|
|
序：最近工作使用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();
}
});
});
|
|
