Notification JS

最新推荐文章于 2026-05-04 11:39:15 发布

翻译最新推荐文章于 2026-05-04 11:39:15 发布 · 2.3k 阅读

本文通过几个示例展示了如何使用Notification API在浏览器中创建并触发通知。这些示例包括简单的即时通知、带有交互处理的通知以及延时通知等。

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

Notification.requestPermission(function (permission) {
var notification = new Notification('Here I am!', {
body: 'Thanks for clicking that button. Hope you liked.',
icon: 'https://cdn2.iconfinder.com/data/icons/ios-7-style-metro-ui-icons/512/MetroUI_HTML5.png',
dir: 'auto'
});

});

var notification = new Notification('要紧通知!', {
body: '你有一个未读通知.',
icon: 'https://cdn2.iconfinder.com/data/icons/ios-7-style-metro-ui-icons/512/MetroUI_HTML5.png',
dir: 'auto',

,onclick:function(){alert("click");}

}).onclose=function(){
alert("clolse");};

var notification = new Notification('要紧通知!', {
body: '你有一个未读通知.点击显示\n跳转',
icon: 'https://cdn2.iconfinder.com/data/icons/ios-7-style-metro-ui-icons/512/MetroUI_HTML5.png',
dir: 'auto'
,
}).onclick=function(){alert("click");};

延时通知：

setTimeout(function(){var notification = new Notification('要紧通知!', {
body: '你有一个未读通知.点击显示\n跳转',
icon: 'https://cdn2.iconfinder.com/data/icons/ios-7-style-metro-ui-icons/512/MetroUI_HTML5.png',
dir: 'auto'
,
}).onclick=function(){alert("click");};},2000);

new Notification('要紧通知!', {
body: '你有一个未读通知.点击显示\n跳转',
icon: 'https://cdn2.iconfinder.com/data/icons/ios-7-style-metro-ui-icons/512/MetroUI_HTML5.png',
dir: 'auto'

,requireInteraction:true //必须等待与用户互动
,renotify:true,

tag:'non-empty',
});

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看