HTML 五中的webnotification API初探

2012-08-27

HTML 5中的webnotification API初探在HTML 5中,WC3连web notification的机制也制定了初步的草稿标准,所谓

HTML 5中的webnotification API初探
在HTML 5中,WC3连web notification的机制也制定了初步的草稿标准,
所谓的web notification,就是说比如可以在定时向客户端推送点消息,
比如OA中,可以在用户的浏览器中的右下角弹出一个信息提示窗口,
W3C的标准在:http://www.w3.org/TR/notifications/
目前支持的是chrome比较好,下面看例子:
1 获得api访问权限
首先,如果是chrome的话,必须进行设置,就是在chrome的选项中,把

高级选项中-->内容设置--点通知一栏的设置,然后设置为"允许所有网站发送桌面
通知"
然后代码中,这样获得:

$('#btnGrantPermission').click(function () {    if (window.Notifications.checkPermission() == 0) {        createNotification();    } else {        window.Notifications.requestPermission();    }});

    就是说,尝试去获得API的权限,如果window.Notifications.checkPermission() == 0,则说明浏览器已经有其权限,可以继续做createNotification();
的方法;
    否则用window.Notifications.requestPermission();去获得实际的权限

2 然后看createNotification();这里是实际设置一个弹出窗口的内容,代码为:

 function createNotification() {            var notification = window.Notifications.createNotification("test.png", "这里是标题", "这里是内容");            notification.onshow = function () {                setTimeout(notification.cancel(), 1500);            }            notification.show();        }

这里用createNotification方法创建一个弹出窗口提示,使用很简单,
这里并设置了这个窗口多久就会消失(1.5S).

3 最后,搞一个按钮,然后当用户点按钮时,就会获得一个右下角弹出窗口的提示,虽然
很丑陋,完整代码如下:

<!DOCTYPE html><html><head>    <title>Notifications</title>        <script type="text/javascript" src="jquery-1.6.2.min.js"></script></head><body>    <div>        <input id="btnGrantPermission" type="button" value="Grant Notification Permission" />    </div>    <script type="text/javascript">        $(document).ready(function () {                    if (window.webkitNotifications) {                window.Notifications = window.webkitNotifications;                $('#btnGrantPermission').click(function () {                    if (window.Notifications.checkPermission() == 0) {                        createNotification();                    } else {                        window.Notifications.requestPermission();                    }                });            }                    });                 function createNotification() {            var notification = window.Notifications.createNotification("test.png", "这里是标题", "这里是内容");            notification.onshow = function () {                setTimeout(notification.cancel(), 1500);            }            notification.show();        }    </script></body></html>

热点排行

Web前端

HTML 五中的webnotification API初探