html5桌面通知,notification的使用,右下角出现通知框

最新推荐文章于 2023-12-20 10:56:45 发布

原创最新推荐文章于 2023-12-20 10:56:45 发布 · 736 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何使用HTML5的Notification API实现桌面通知功能，包括判断浏览器支持情况、请求权限、设置通知内容及事件处理等步骤，并提供了示例代码。

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

html5桌面通知,notification的使用,右下角出现通知框

1先判断浏览器是否支持：window.Notification

2判断浏览器是否开启提示的权限：Notification.permission === 'granted'（如果不允许则设置为允许：Notification.requestPermission()）

3设置提示的内容：var notification = new Notification('订单提示', { body: "您有新订单：" + data + "" });//Notification("标题","内容")

4可以设置其他功能比如消息点击事件：notification.onclick = function (e) {
　　　　　　　　　　　　　　　　　　　　alert("点击")
　　　　　　　　　　　　　　　　　　　　　　 }

例：

if (window.Notification) {
                    if (Notification.permission === 'granted') {
                        var notification = new Notification('标题', { body: "内容可以自己随便定义" });
                        notification.onclick = function (e) {
                            alert("点击了我")//可以点击打开一个网址
                        }
                    } else {
                        Notification.requestPermission();//设置允许通知
                    }
                }

拓展：内容可设置属性如下：

dir : 文字的方向；它的值可以是 auto（自动）, ltr（从左到右）, or rtl（从右到左）
lang: 指定通知中所使用的语言。
body: 通知中额外显示的字符串
tag: 赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。
icon: 一个图片的URL，将被用于显示通知的图标。

可用事件如下：

Notification.onclick处理 click 事件的处理。每当用户点击通知时被触发。
Notification.onshow处理 show 事件的处理。当通知显示的时候被触发。
Notification.onerror处理 error 事件的处理。每当通知遇到错误时被触发。
Notification.onclose处理 close 事件的处理。当用户关闭通知时被触发。

关闭通知的实例方法：

var n = new Notification(theTitle,options);
  setTimeout(n.close.bind(n), 4000);

注意：ie不支持，本人是在谷歌和火狐测试成功。

自己开发的时候记录一下，大神路过的话请忽略或者指教一下有什么需要注意的点，谢谢。

posted @ 2015-06-29 19:08 wuyubing 阅读( ...) 评论( ...) 编辑收藏