Web Notification消息通知的使用（桌面消息通知）

最新推荐文章于 2022-12-20 17:55:56 发布

月亮巡视人间

最新推荐文章于 2022-12-20 17:55:56 发布

阅读量547

点赞数

分类专栏：移动端 HTML JavaScript的 JavaScript Vue.js 文章标签： H5 前端 web端消息通知 Notification

本文链接：https://blog.csdn.net/UnderIcon/article/details/99756977

版权

JavaScript 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

Vue.js

16 篇文章 0 订阅

订阅专栏

JavaScript的

7 篇文章 0 订阅

订阅专栏

如果没有效果，请开启浏览器的消息通知权限。下面上代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  
 <button id="button">有人想加你为好友</button>
<p id="text"></p>
 </body>
 
 <script type="text/javascript">  
if (window.Notification) {
    var button = document.getElementById('button'), text = document.getElementById('text');
    
    var popNotice = function() {
        if (Notification.permission == "granted") {
            var notification = new Notification("Hi，帅哥：", {
                body: '可以加你为好友吗？',
                icon: 'https://s2.ax1x.com/2019/08/19/m3hgYj.jpg'
            });
            
            notification.onclick = function() {
                text.innerHTML = '张小姐已于' + new Date().toTimeString().split(' ')[0] + '加你为好友！';
                notification.close();    
            };
        }    
    };
    
    button.onclick = function() {
        if (Notification.permission == "granted") {
            popNotice();
        } else if (Notification.permission != "denied") {
            Notification.requestPermission(function (permission) {
              popNotice();
            });
        }
    };
} else {
    alert('浏览器不支持Notification');    
}
 
 
</script>  
 
</html>

月亮巡视人间

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
Web Notification消息通知的使用（桌面消息通知）

如果没有效果，请开启浏览器的消息通知权限。下面上代码<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" co...
复制链接

扫一扫