如何在HTML中通过navigator.locks.query查询当前持有和等待中的锁状态-html教程-PHP中文网

navigator.locks.query()返回promise，解析为{held: [{name, mode, clientid}], pending: [{name, mode, clientid, starttime}]}，仅在安全上下文且用户手势触发时有效。

如何在html中通过navigator.locks.query查询当前持有和等待中的锁状态

navigator.locks.query 返回什么结构

navigator.locks.query() 返回一个 Promise，解析为包含两个数组的对象：held（当前持有锁的列表）和 pending（正在等待获取锁的请求列表）。它不返回锁的内容或持有者身份，只反映浏览器内部锁管理器的快照。

注意：该 API 仅在安全上下文（https:// 或 localhost）中可用，且需用户交互触发（如点击事件中调用），否则可能被拒绝或返回空结果。

held 中每个项是 { name: string, mode: 'exclusive' | 'shared', clientId: string }，clientId 是当前持有锁的 ServiceWorker 或页面的唯一标识（不是可读 ID，无法映射到具体标签页）
pending 中每个项是 { name: string, mode: 'exclusive' | 'shared', clientId: string, startTime: number }，startTime 是调用 navigator.locks.request() 的时间戳（毫秒）
锁名（name）区分大小写，且无命名空间隔离——不同脚本用相同名字会互相竞争

实际调用 query() 的正确时机和方式

不能在页面加载后立即无条件调用 navigator.locks.query()，它会被静默拒绝或返回空对象。必须确保调用发生在用户手势之后（例如按钮点击、键盘事件），且浏览器已启用 Lock Manager API。

示例（带错误防护）：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

async function inspectLocks() {
  try {
    const { held, pending } = await navigator.locks.query();
    console.log('Held:', held);
    console.log('Pending:', pending);
  } catch (err) {
    // 常见错误：SecurityError（非安全上下文）、NotSupportedError（API 不可用）、InvalidStateError（未在用户手势中）
    console.warn('Lock query failed:', err.name, err.message);
  }
}

document.getElementById('debug-btn').addEventListener('click', inspectLocks);

务必用 try/catch 包裹，因为失败不抛出标准 TypeError，而是特定 DOMException 子类
不要在 setTimeout 或 fetch 回调中直接调用——这些不属于用户激活状态（user activation）
Chrome 117+ 和 Firefox 120+ 支持，Safari 尚未实现；可通过 'locks' in navigator 检测基础可用性

query() 结果里 clientId 怎么理解

clientId 是浏览器分配的 opaque 字符串，形如 "1a2b3c4d-5e6f-7g8h-9i0j-1k2l3m4n5o6p"，它对应当前持有或请求锁的 Client（即一个页面、iframe 或 Service Worker 实例），但无法反查该 client 的 URL、title 或是否还在运行。