如何利用HTML5中IdleDetector在检测到用户离席后自动锁定敏感数据-H5教程-PHP中文网

idledetector 是 chrome 94+ 实验性 api，用于检测用户空闲或锁屏状态，需 https/localhost、显式权限及前台运行；开发者须据此自行实现敏感数据清除、dom 隐藏或跳转锁定页等防护逻辑。

如何利用html5中idledetector在检测到用户离席后自动锁定敏感数据

IdleDetector 是 HTML5 中一项实验性 API，目前仅在 Chrome 94+（需启用实验性功能）且仅支持安全上下文（HTTPS 或 localhost）中可用。它本身不能直接锁定数据，而是用于检测用户是否处于空闲（无输入）或锁屏状态；真正的“锁定敏感数据”需由开发者结合该信号自行实现逻辑（如清空内存、隐藏内容、跳转登录页等）。

前提条件与权限准备

使用 IdleDetector 前必须满足以下条件：

页面运行在 HTTPS 或 localhost 环境下（HTTP 非本地环境会被拒绝）
用户已明确授予 "idle-detection" 权限（需调用 navigator.permissions.query() 并请求）
Chrome 浏览器版本 ≥ 94，且在 chrome://flags 中启用 “Idle Detection API”（默认可能关闭）
页面处于前台（document.visibilityState === "visible"），否则检测可能暂停

注册并监听空闲状态变化

创建 IdleDetector 实例后，通过 start() 启动检测，并监听 change 事件判断用户是否离席：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

if ("IdleDetector" in window) {
  const idleDetector = new IdleDetector();

  idleDetector.addEventListener("change", () => {
    const state = idleDetector.userState; // "active" | "idle" | "locked"
    const threshold = idleDetector.idleThreshold; // 毫秒，如 60_000（1分钟）

    if (state === "idle" || state === "locked") {
      handleUserAway();
    }
  });

  try {
    await idleDetector.start({
      threshold: 60_000 // 用户无操作满60秒触发 idle
    });
  } catch (err) {
    console.warn("Idle detection not available:", err);
  }
}