不自重者,取辱。不自长者,取祸。不自满者,受益。不自足者,博闻。

接前一篇文章,这里有个Demo:http://www.baidufe.com/demo/notification.html

贴几段关键代码,需要的可以直接拿走。

1、W3C标准的Notification

/**
 * 显示notification,by Notification
 * @return {[type]}
 */
var _showNotificationByW3C = function(){
    window.indexForNotify = window.indexForNotify ? ++window.indexForNotify : 1;
    var notify = new Notification(
            "Alien: " + (new Date()).toUTCString(),
            {
                iconUrl : Session.staticDomain + "/img/alien20.jpg",
                tag : 'tag_by_alien',
                body : "你好,这个是通过Notification来创建的,这的名字叫:Demo"
                        + window.indexForNotify + ","
                        + "你可以通过它来做一些很炫的桌面提醒应用!这个API还很不成熟,"
                        + "连个icon都显示不出来!!!它哭着对我说,API都是骗人的!"
            });
    notify.onerror = function(event){
        console.log("error事件被触发:",event);
    };
    notify.onshow = function(event){
        console.log("show事件被触发:",event);
    };
    notify.ondisplay = function(event){
        console.log("display事件被触发:",event);
    };
    notify.onclick = function(event){
        console.log("click事件被触发:",event);
        notify.cancel();
    };
    notify.onclose = function(event){
        console.log("close事件被触发:",event);
    };
    notify.show();
};
#web前端 #html5 #notification 浏览(1227) 阅读全文 评论(3)

桌面提醒,相信接触过HTML5的同学都不会陌生,用它,还是可以做一些比较炫的东西的,在web page中可以用,在chrome-extension中也可以用。

接下来,我来说说我对这个东西的了解!


1、浏览器支持情况:

   

#web前端 #html5 #notification 浏览(1826) 阅读全文 评论