H5桌面消息通知Notification

╰半夏微凉° 2022-04-03 05:45 356阅读 0赞

# H5桌面消息通知Notification #

代码很简单,直接复制即可看到效果

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>html5桌面通知</title>
        </head>
        <body>
            <input type="button" value="开启桌面通知" onclick="showDeskTopNotice('通知','HTML5桌面消息');">
            <script> function showDeskTopNotice(title,msg){ var Notification = window.Notification || window.mozNotification || window.webkitNotification; if(Notification){ Notification.requestPermission(function(status){ //status默认值'default'等同于拒绝 'denied' 意味着用户不想要通知 'granted' 意味着用户同意启用通知 if("granted" != status){ return; }else{ var tag = "sds"+Math.random(); var notify = new Notification( title, { dir:'auto', lang:'zh-CN', tag:tag,//实例化的notification的id icon:'https://admin.hms.xin/group1/M00/00/01/rB_YCFsY0OeAX6Q8AAAQvnJ6aNc109.ico',//通知的缩略图,//icon 支持ico、png、jpg、jpeg格式 body:msg //通知的具体内容 } ); notify.onclick=function(){ //如果通知消息被点击,通知窗口将被激活 window.focus(); }, notify.onerror = function () { console.log("HTML5桌面消息出错！！！"); }; notify.onshow = function () { /*setTimeout(function(){ notify.close(); },2000)*/ }; notify.onclose = function () { console.log("HTML5桌面消息关闭！！！"); }; } }); }else{ console.log("您的浏览器不支持桌面消息"); } }; </script>
        </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，356人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5：notification(浏览器通知)

一、notification简介 Web Notifications是HTML5 的一个特性，目前我知道的有谷歌浏览器和windows edge对它进行了支持，用于向用户

矫情吗；*/ 2024年03月30日 10:53/ 0 赞/ 70 阅读

相关浏览器使用Notification桌面通知消息推送

什么是 Notification？ `Notification` 是浏览器最小化后在桌面显示消息的一种方法类似于 `360` 等流氓软件在桌面右下角的弹窗广

旧城等待，/ 2024年03月17日 14:16/ 0 赞/ 82 阅读

相关前端桌面通知（Desktop Notifications）API

聚沙成塔·每天进步一点点 ⭐ 专栏简介前端入门之旅：探索Web开发的奇妙世界欢迎来到前端入门之旅！感兴趣的可以订阅本专栏哦！这个专栏是为那些对Web开发感

超、凢脫俗/ 2024年02月05日 15:49/ 0 赞/ 62 阅读

相关消息通知(Notification)系统优化

点击下方“JavaEdge”，选择“设为星标” 第一时间关注技术干货！ > 免责声明~ > > 任何文章不要过度深思！ > > 万事万物都经不起审视，因为世上没有同样的

Bertha 。/ 2024年02月05日 15:49/ 0 赞/ 65 阅读

相关浏览器桌面通知NOTIFICATION探究

首先说明，这篇博文不是科普讲解的，而是立flag研究的，是关于浏览器消息自动推送，就是下面这个玩意： ![format_png][] 　　最近常常在浏览器看到这样的消息推送

缺乏、安全感/ 2023年03月06日 05:14/ 0 赞/ 19 阅读

相关【HTML】HTML5中的Web Notification桌面通知

大家在做一些浏览器端的聊天功能的时候，或者在一些网站跟在线客服咨询的时候，会看到一些消息通知的提示，常见的有浏览器标签页的闪烁和屏幕右侧的消息通知。这里简单的介绍一下如何实现这

阳光穿透心脏的1/2处/ 2022年12月27日 01:27/ 0 赞/ 169 阅读

相关 Android Notification通知栏消息

Activity: package com.wkk.app8; import android.annotation.TargetApi; i

刺骨的言语ヽ痛彻心扉/ 2022年07月15日 01:46/ 0 赞/ 267 阅读

相关 HTML5开启浏览器桌面通知 Web Notification

![70][] 说明： 1、Chrome要求必须https才可以开启浏览器通知 2、显示图片在本服务器，不支持跨越 3、自定义声音Chrome不播放，Firefo

淡淡的烟草味﹌/ 2022年05月18日 10:09/ 0 赞/ 357 阅读

相关 H5桌面消息通知Notification

H5桌面消息通知Notification 代码很简单,直接复制即可看到效果 <!DOCTYPE html> <html> <head>

╰半夏微凉°/ 2022年04月03日 05:45/ 0 赞/ 357 阅读

相关 window.Notification实现桌面通知

window.Notification实现桌面通知var popNotice = function()

朱雀/ 2020年09月12日 01:54/ 0 赞/ 1279 阅读