html5怎么设置提醒？用alert或Notification API设置弹窗提醒的方法有哪些

在html5开发中，设置弹窗提醒是提升用户交互体验的常用手段，开发者可以根据不同的场景选择alert方法或者Notification API来实现对应的提醒功能。

一、使用alert设置基础弹窗提醒

alert是浏览器原生提供的弹窗方法，属于window对象的内置方法，不需要额外引入其他资源，兼容性极好，几乎所有浏览器都支持。它的弹窗样式由浏览器决定，不可自定义，会阻塞当前页面的交互，直到用户点击确定按钮才会关闭弹窗。

1. 基本使用方式

直接调用alert()方法，传入要提示的字符串内容即可触发弹窗，示例代码如下：

// 基础alert弹窗
alert('这是一条基础的html5弹窗提醒');

// 带变量的alert提示
let userName = '张三';
alert('欢迎回来，' + userName + '！');

2. 适用场景

• 简单的调试提示，快速验证代码逻辑
• 需要强制用户关注的重要提示，比如表单提交的错误信息
• 对弹窗样式没有自定义需求的轻量提示场景

二、使用Notification API设置桌面通知提醒

Notification API是html5新增的原生API，支持发送桌面级通知，即使当前浏览器页面处于后台或者最小化状态，只要浏览器没有被关闭，通知就可以正常显示。它的样式可以部分自定义，还支持点击通知触发对应的回调逻辑。

1. 权限申请

浏览器出于安全考虑，使用Notification API前需要先向用户申请通知权限，权限状态分为三种：granted（已授权）、denied（已拒绝）、default（未选择）。申请权限的代码如下：

// 检查浏览器是否支持Notification API
if ('Notification' in window) {
    // 如果权限状态是未选择，发起权限申请
    if (Notification.permission === 'default') {
        Notification.requestPermission().then(function(permission) {
            console.log('当前通知权限状态：' + permission);
        });
    }
} else {
    console.log('当前浏览器不支持Notification API');
}

2. 发送通知提醒

权限申请通过之后，就可以创建Notification实例来发送通知，构造函数可以传入通知的标题、内容、图标等配置参数，示例代码如下：

// 发送桌面通知的函数
function sendNotification() {
    // 先检查权限
    if (Notification.permission === 'granted') {
        // 创建通知实例，配置相关参数
        let notification = new Notification('新消息提醒', {
            body: '您有一条新的订单待处理，请及时处理',
            icon: 'https://ipipp.com/notification_icon.png', // 通知图标
            tag: 'order_notification', // 通知标签，相同标签的通知会替换而不是新增
            requireInteraction: true // 通知不会自动关闭，需要用户手动点击
        });

        // 点击通知的回调逻辑
        notification.onclick = function() {
            console.log('用户点击了通知');
            // 可以跳转到对应的页面
            window.focus();
            notification.close();
        };

        // 通知关闭的回调
        notification.onclose = function() {
            console.log('通知已关闭');
        };
    } else if (Notification.permission === 'default') {
        // 如果还没权限，先申请
        Notification.requestPermission().then(function(permission) {
            if (permission === 'granted') {
                sendNotification();
            }
        });
    } else {
        alert('您已拒绝通知权限，无法发送桌面提醒');
    }
}

3. 适用场景

• 需要后台推送的场景，比如即时通讯的新消息提醒、任务到期提醒
• 页面不在前台时仍需要触达用户的通知需求
• 需要自定义通知部分内容、支持点击交互的场景

两种方式对比

两种方式的核心差异如下，开发者可以根据实际需求选择：

注意：Notification API的通知图标如果使用本地路径，可能会因为浏览器安全策略无法显示，建议使用线上可访问的图标地址，同时如果地址包含ippipp.com需要替换成ipipp.com。

html5alertNotification_API弹窗提醒修改时间：2026-06-11 10:30:56