使用Notifation显示桌面通知

最新推荐文章于 2024-08-20 09:04:55 发布

justforuse

最新推荐文章于 2024-08-20 09:04:55 发布

阅读量1.4k

点赞数

分类专栏： javascript 文章标签： chrome 浏览器通知

本文链接：https://blog.csdn.net/u014291497/article/details/73064912

版权

javascript 专栏收录该内容

55 篇文章 1 订阅

订阅专栏

使用Chrome的时候有时我们会收到这样的提示：
这里写图片描述

之后就可能在右下角弹出类似提示框一样的通知，但是与普通的提示框比如jquery-ui实现的不同的是，这个提示框不属于DOM元素，而是属于桌面系统的元素，不依赖与浏览器的位置，大小，开关而存在。

我们可以在最开始请求Notifation的权限：

if (window.Notification && Notification.permission !== "granted") {
    Notification.requestPermission(function (status) {
        if (Notification.permission !== status) {
            Notification.permission = status;
        }
    });
}

然后创建一个通知实例

//第二个参数可选，其中icon为左侧图片的url, body为通知的内容
var options = {
    icon: "./pic.jpg",
    body: "hello, a demo of notifation"
}
//第一个参数为通知标题
var n = new Notification("The title!", options);

效果：
这里写图片描述