浏览器消息通知，桌面消息提醒

最新推荐文章于 2025-01-15 17:33:59 发布

原创最新推荐文章于 2025-01-15 17:33:59 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器消息提醒 #桌面消息提醒

这篇博客介绍了如何在网页中实现浏览器桌面消息提醒功能。通过JavaScript的Notification API，当用户同意接收通知后，可以在桌面显示包含标题和内容的消息通知，并在用户点击通知时激活页面，同时设置自动关闭通知的时间。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>桌面提示信息</title>
</head>
<body>

<button onclick="notifyMe()">Notify me!</button>
<script>

    function notifyMe() {
        // 先检查浏览器是否支持
        if (!("Notification" in window)) {
            alert("This browser does not support desktop notification");
        }

        // 检查用户是否同意接受通知
        else if (Notification.permission === "granted") {
            var notification = new Notification('来消息了', {
                body: '可以加你为好友吗？',
                icon: 'http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg',

            });
            notification.onclick = function() {
                window.focus();//打开对应的页面
                notification.close();//关闭提示信息
            };
            //定时关闭
            notification.onshow = function () {//定时关闭
                setTimeout(notification.close.bind(notification), 3000);
            }
        }

        // 否则我们需要向用户获取权限
        else if (Notification.permission !== 'denied') {
            Notification.requestPermission(function (permission) {
                // 如果用户同意，就可以向他们发送通知
                if (permission === "granted") {
                    var notification = new Notification('111', {
                        body: '第一次点击同意提示，显示本条信息。'
                    });
                }
            });
        }

    }

</script>