Js 之notification浏览器桌面通知

一、示例

复制代码
function showDeskTopNotice(id, 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',
                            requireInteraction: true,
                            tag:id,//实例化的notification的id
                            icon:'/kfmanage/public/assets/images/index/workerman_logo.png',//通知的缩略图,//icon 支持ico、png、jpg、jpeg格式
                            body:msg //通知的具体内容
                    });
                    notify.onclick=function(){
                        //如果通知消息被点击,通知窗口将被激活
                        window.focus();
                        notify.close();
                        //打开对应的界面
                        $("#v"+id+" .visit_content").trigger('click');
                    },
                    notify.onerror = function () {
                        console.log("HTML5桌面消息出错!!!");
                    };
                    notify.onclose = function () {
                        console.log("HTML5桌面消息关闭!!!");
                    };
                }
        });
    }else{
        console.log("您的浏览器不支持桌面消息");
    }
};
复制代码

二、参数说明

Notification的参数:

  • title:通知的标题
  • options:通知的设置选项(可选)。
    • body:字符串。通知的body内容。
    • tag:代表通知的一个识别标签,相同tag时只会打开一个通知窗口。
    • icon:字符串。要在通知中显示的图标的URL。
    • data:想要和通知关联的数据,可以在new Notification返回的实例中找到。
    • renotify: 布尔值。相同tag,新通知出现的时候是否替换之前的(开启此项,tag必须设置)。
    • requireInteraction:布尔值。通知不自动关闭,默认为false(自动关闭)。

 

如果你感觉有收获,欢迎给我打赏 ———— 以激励我输出更多优质内容,联系QQ:2575404985
        
posted @   样子2018  阅读(2433)  评论(0编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
· Apache Tomcat RCE漏洞复现(CVE-2025-24813)
点击右上角即可分享
微信分享提示