HTML5 消息通知
2016/12/23    

最近看腾讯视频总是看到,浏览器右下角有消息通知;哎呦,这怎么出来的。

经过度娘搜索得知是H5大兄的notification

Demo:

        //判断浏览器是否支持notification
        if (typeof(window.Notification)!='undefined') {
            //判断当前页面是否被允许发出通知
            if (Notification.permission == 'granted') {
                var Notifications = new Notification('静水缘上线了', { body: "哈哈,上线了!", tag: 1, icon: 'http://www.lpsjj.cn/favicon.ico' });
                    Notifications.onclick=function(event){
                         event.preventDefault();
                         window.open('http://www.lpsjj.cn/blog/','_blank');
                    } 
            } else {
                Notification.requestPermission();

            }
        } else {
            alert("您的浏览器不支持桌面通知特性,请下载谷歌浏览器试用该功能");
        };

api详解:

Methods:close()

    requestPermission()


Properties:body 字符串内容

     data 数据不显示

     dir 文本显示方向 可选值 auto|ltr|rtl

     icon 左侧显示图片

     image The image read-only property of the Notification interface contains the URL of an image to be displayed as part of the notification, as specified in the image option of the Notification()constructor.

      onclick 点击执行


Notification - Web APIs | MDN