Windows消息游览器通知Notification

qq_42753983

已于 2023-12-06 14:35:11 修改

阅读量541

点赞数 10

文章标签： vue.js 前端 javascript

于 2023-12-06 14:31:41 首次发布

本文链接：https://blog.csdn.net/qq_42753983/article/details/134830771

版权

1.使用的是Notifgication发消息初始化实例Notification

const  Notification = new  Notification(‘标题’，{
    
    // 有三个值 auto自动  ltr是(从左到右)  rtl(从右到左)
    dir：'auto',

    // 指定通知中所使用的语言。这个字符串必须在BCP 47 language tag 文档中是有效的
    lang：'zn',

    //消息ID，相同ID会被替换 不管是mqtt还是singlar返回的结果列中都会有消息ID
    tag：tag,     
   
    //消息停留时间更长
    requireInteraction: true,

    //消息内容
    body:'',

    //一个布尔值。默认值为 false；设为 true 将会重新通知用户。
    renotify:false,

    //一个布尔值。默认值是 false；设为 true 将使通知静音。
    silent:true,

    //一个布尔值。 是默认值; 使通知具有“粘性”。false true
    sticky：true

    //只读属性返回一个在 Notification() 构造函数的 data 选项中指定的、结构化的通知的数据。通知的            数据可以是任意你希望与通知关联的数据。
    //当前我的需求点击Windows消息弹框中药跳转 所以我在data里存放的要跳转的网址
    data:'https://baidu.com.cn'
})

2.Notification点击事件

//点击Windows消息弹窗除了关闭按钮其他区域的点击事件跳转
//因为我这边是把data存进了实体例里的data，所以我这边是这样取的
//不在上述实例里写 也可以再下方里直接写要跳转的地址
Notification.onclick=function(event,data){
    window.open(event.currentTarget.data)
}


//点击关闭按钮方法
Notification.onclose=function(event,data){
}

3.详细Notification参数可以查看官方文档比较详细

Notification：renotify 属性 - Web API 接口参考 | MDN