JavaScript 通知

2025年3月18日 | 阅读时长 4 分钟

JavaScript 通知函数使用 Notification API 向用户显示桌面通知。我们可以使用它来了解 JavaScript 功能的消息或信息。

通知权限

Notification API 默认强制执行两个安全方面。JavaScript 可以轻松利用它。
首先，我们可以同意接收每个 javascript 源的通知。
其次，通知可以通过在安全上下文 (HTTPS) 中执行的代码发送。
用户可以选择接受或拒绝您的同意请求。它会通知用户或开发者。
如果用户明确拒绝，浏览器将记住该决定。我们没有机会再次请求批准。
如果用户忽略或不同意通知权限，我们可以反复发送请求。

示例

JavaScript 通知使用 JavaScript API 显示通知或错误信息。

示例 1

给出的示例显示了接受通知时的输出。通知权限设置为 true。

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title> JavaScript Notification API </title>
</head>
<body style = "background-color:yellow;">
<div class = "containers">
<h1> JavaScript Notification API Example </h1>
<div class = "error_info"></div>
</div>
<script>
//Create and display the required notification
const showInformation = () => {
//Create a new website notification
const notification = new Notification('JavaScript Notification API', {
body: 'This is a JavaScript Notification API demo',
icon: './img/js.png'
});
// navigate to a URL when clicked
notification.addEventListener('click', () => {
window.open('https://tpointtech.cn/', '_blank');
});
const error_info = document.querySelector('.error_info');
error_info.style.display = 'block';
error_info.textContent = 'We access the given websites notifications';
}
// show an error_info message
const showMistake = () => {
}
//Check the given notification permission
let notification_grant = true;
if (Notification.permission === 'notification_grant') {
notification_grant = false;
}
// show the given error notification 
notification_grant ? showInformation() : showMistake();
</script>
</body>
</html>

输出

下图获取通知信息。

示例 2

给出的示例显示了通知设置为 false 时的输出。通知权限设置为 false。

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title> JavaScript Notification API </title>
</head>
<body style = "background-color:yellow;">
<div class = "containers">
<h1> JavaScript Notification API Example </h1>
<div class = "error_info"></div>
</div>
<script>
//Create and display the required notification
const showInformation = () => {
//Create a new website notification
const notification = new Notification('JavaScript Notification API', {
body: 'This is a JavaScript Notification API demo',
icon: './img/js.png'
});
// navigate to a URL when clicked
notification.addEventListener('click', () => {
window.open('https://tpointtech.cn/', '_blank');
});
}
// show an error_info message
const showMistake = () => {
const error_info = document.querySelector('.error_info');
error_info.style.display = 'block';
error_info.textContent = 'We block the given websites notifications';
}
//Check the given notification permission
let notification_grant = false;
if (Notification.permission === 'notification_grant') {
notification_grant = false;
}
// show the given error notification 
notification_grant ? showInformation() : showMistake();
alert(notification_grant);
</script>
</body>
</html>

输出

下图获取通知信息。

示例 3

给出的示例显示了接受通知时的输出，或者在未接受通知时显示错误。

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title> JavaScript Notification API </title>
</head>
<body style = "background-color:yellow;">
<div class = "containers">
<h1> JavaScript Notification API Example </h1>
<div class = "error_info"></div>
</div>
<script>
(async () => {
//Create and display the required notification
const showInformation = () => {
//Create a new website notification
const notification = new Notification('JavaScript Notification API', {
body: 'This is a JavaScript Notification API demo',
icon: './img/js.png'
});
//Close the notification after 10 seconds
setTimeout(() => {
notification.close();
}, 10 * 1000);
// navigate to a URL when clicked
notification.addEventListener('click', () => {
window.open('https://tpointtech.cn/', '_blank');
});
}
// show an error_info message
const showMistake = () => {
const error_info = document.querySelector('.error_info');
error_info.style.display = 'block';
error_info.textContent = 'We operated the given websites notifications';
}
//Check the given notification permission
let notification_grant = false;
if (Notification.permission === 'notification_grant') {
notification_grant = true;
} else if (Notification.permission !== 'denied') {
let permission = await Notification.requestPermission();
notification_grant = permission === 'notification_grant' ? true : false;
}
// show the given error notification 
notification_grant ? showInformation() : showMistake();
})();
</script>
</body>
</html>

输出

下图获取通知或错误信息。

输出 1

输出 2

结论

JavaScript 通知通过代码信息帮助开发者和用户。

下一个主题Jasmine-javascript

← 上一个下一个 →

JavaScript 通知

通知权限

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript 通知

通知权限

示例

结论

相关帖子

JavaScript 中的随机颜色生成器

JavaScript 中的链表实现

如何从 JavaScript 数组中移除第一个元素

高级 JavaScript 概念

JavaScript array.length

JavaScript 中的迭代器和生成器

JavaScript 函数声明和 JavaScript 表达式之间的区别

JavaScript 中的 HTML 对象

D3.js 库

检查 JavaScript 中的子字符串

订阅 Tpoint Tech

联系信息

关注我们

教程