html5怎么设置提醒_html5用alert或Notification API设置弹窗提醒【设置】

HTML5提供alert()和Notification API两种提醒方式：前者是同步模态框，兼容性好；后者需HTTPS和用户授权，支持自定义图标与行为，并可降级为alert。

如果您希望在网页中向用户发送提醒，HTML5 提供了两种常见方式：内置的 alert() 方法和更现代的 Notification API。以下是设置这两种弹窗提醒的具体步骤：

一、使用 alert() 方法显示简单提示框

alert() 是浏览器原生的同步模态对话框，调用后会暂停脚本执行，直到用户点击“确定”。它适用于调试或简易交互场景，无需权限且兼容性极佳。

1、在 HTML 文件的 <script></script> 标签内或外部 JS 文件中编写 JavaScript 代码。

2、调用 alert() 函数，并传入字符串参数作为提示内容，例如：alert("操作已完成")。

立即学习“前端免费学习笔记（深入）”；

3、确保该语句在页面加载完成或特定事件（如按钮点击）触发时执行，例如绑定到 onclick 属性或 addEventListener。

二、使用 Notification API 显示系统级通知

Notification API 允许网页向用户桌面发送异步通知，需用户授权，且仅在 HTTPS 环境或 localhost 下可正常请求权限。通知可包含标题、正文、图标等，不中断用户操作。

1、在 JavaScript 中检查浏览器是否支持 Notification 接口：if ("Notification" in window)。

2、调用 Notification.requestPermission() 请求用户授权，该方法返回 Promise，需处理 "granted" 或 "denied" 状态。

3、当权限为 granted 时，使用 new Notification(title, options) 创建通知实例，其中 title 为必填字符串，options 可包含 body、icon 等字段。

三、通过按钮触发 alert 提醒

将 alert 调用封装为函数并绑定至 DOM 元素，可实现用户主动触发提醒，避免页面加载即弹出造成干扰。

1、在 HTML 中添加一个按钮，例如：点击提醒。

标签： html5 javascript java html js 浏览器 win 点击事件