Notification简述

最新推荐文章于 2024-08-29 14:52:15 发布

wengerwss

最新推荐文章于 2024-08-29 14:52:15 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/wengerwss/article/details/51376718

javascript 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了浏览器中的Notification对象，用于实现即使页面最小化也能运行的通知功能。内容包括Notification的permission属性，requestPermission方法用于获取用户授权，以及如何实例化Notification并处理相关事件，如onclose、onshow和onclick。示例代码展示了如何创建和配置通知。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Notification是window里面的一个对象，但它主要是依附在浏览器程序里面，意思说页面即使最小化了，它还可以运行。

Notification.permission是Notification对象的只读属性，三个值：“granted"：用户允许，"denied"：用户拒绝，还有第三个值default ，意思是不知道用户是允许还是拒绝。

Notification.requestPermission 方法：

当permission的值是default 时，此方法才会有效执行，询问用户是否授权网站通知推送；

它的参数是一个回调函数，当用户执行了允许或拒绝或关闭后，回调函数就会传入一个字符串，此字符串就是permission的三个值之一；

当permission是granted是就可以实例化Notification对象了。

Notification通过构造方法进行实例化：

var n = new Notification(title,options );

title是通知的标题，options 是可选属性；

options 本来就是一个字面量，它包含Notification实例对象属性：

dir：文字方向，

body：通知内容，

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

tag: 赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。

icon：图片显示的地址；

Notification的实例对象属性都是只读的，在构造方法设置后不能修改。

事件处理

Notification.onclick

处理 click 事件的处理。每当用户点击通知时被触发。

Notification.onshow

处理 show 事件的处理。当通知显示的时候被触发。

Notification.onerror

处理 error 事件的处理。每当通知遇到错误时被触发。

Notification.onclose

处理 close 事件的处理。当用户关闭通知时被触发。

</pre><pre name="code" class="javascript">来个例子：

<pre name="code" class="javascript">window.addEventListener('load', function () {
if (!("Notification" in window)) {
//alert("您的浏览器不支持通知推送功能");
}else if(Notification.permission === "granted"){
showND();
}else if (Notification.permission !== 'denied') {
//向用户申请权限
Notification.requestPermission(function (permission) {  
if (permission === "granted") {
showND();
}
});
}
});
function showND(){
var icon_="";
var data_={body:"",icon:icon_};
data_.body="hello！";
notifiy("我是标题",data_);
function notifiy(title,data){
var n = new Notification(title,data);
n.onclose=function(){
alert('close');
};
n.οnshοw=function(){
var t1=window.setTimeout(function(){
n.close();
//window.clearTimeout(t1);
},5000);
};
n.οnerrοr=function(){};
n.οnclick=function(){
alert('click');
}


}

参考地址：https://developer.mozilla.org/zh-CN/docs/Web/API/notification