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

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

Teamoping

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

阅读量2.3k

点赞数

文章标签：浏览器消息提醒桌面消息提醒

本文链接：https://blog.csdn.net/Teamoping/article/details/92797278

版权

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

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

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

<button οnclick="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 () {//定时关