HTML 5 桌面提醒

复制代码
<script>
    function showNotice(title,msg){
        var Notification = window.Notification || window.mozNotification || window.webkitNotification;
        if(Notification){
            Notification.requestPermission(function(status){
                //status默认值'default'等同于拒绝 'denied' 意味着用户不想要通知 'granted'意味着用户同意启用通知
                if("granted" != status){
                    return;
                }else{
                    var tag = "sds"+Math.random();
                    var notify = new Notification(
                            title,
                            {
                                dir:'auto',
                                lang:'zh-CN',
                                tag:tag,//实例化的notification的id
                                icon:'域名/favicon.ico', //通知的缩略图,//icon 支持ico、png、jpg、jpeg格式
                                body:msg //通知的具体内容
                            }
                    );
                    notify.onclick=function(){
                        //如果通知消息被点击,通知窗口将被激活
                        window.focus();
                    },
                    notify.onerror = function () {
                       console.log("HTML5桌面消息出错!!!");
                    };
                    notify.onshow = function () {
                        setTimeout(function(){
                            notify.close();
                        },7000)
                    };
                    notify.onclose = function () {
                        console.log("HTML5桌面消息关闭!!!");
                    };
                }
            });
        }else{
            console.log("您的浏览器不支持桌面消息");
        }
    };
 showNotice("您有新的通知","<span></span>很可惜这里不能添加html代码,只能是纯文本);
</script>
复制代码

 

  Notification.requestPermission  该方法将向用户请求询问显示提示框的权限。返回值有三个:

default  //默认
granted //允许
denied //拒绝

var notify = new Notification(title,options) 构造函数,两个参数为title(标题,可设为空,则不显示标题),options为一个对象,有以下几个属性:
dir(文字方向,经测试都不支持)
lang(语言)
body(消息体)
tag(标签)
icon(icon地址)

Notification对象还有四个事件:分别在消息显示、被点击、被关闭和出错的时候被触发
onshow()
onclick()
onclose()
onerror()
posted @   柔和的天空  阅读(339)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 25岁的心里话
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示