FeHelperWeb开发者助手 FeHelper

本插件支持Chrome、Firefox、MS-Edge浏览器,内部工具集持续增加,目前包括 JSON自动/手动格式化、JSON内容比对、代码美化与压缩、信息编解码转换、二维码生成与解码、图片Base64编解码转换、Markdown、 网页油猴、网页取色器、脑图(Xmind)等贴心工具,甚至在目前新版本的FeHelper中,还集成了FH开发者工具, 如果你也想自己搞一个工具集成到FeHelper中,那这一定能满足到你。另外,本站也提供部分工具的在线版本,欢迎使用,欢迎反馈!
点击按钮快速安装 Chrome版 Firefox版 Microsoft Edge版
FeHelper-version FeHelper-rating FeHelper-users
FeHelper 已在Github开源,也欢迎大家提issue,或者直接提交PR加入进来! 现在就去Github看看>> star fork

接前一篇文章,这里有个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) 阅读全文 评论