HTML调用电池状态API获取电量的方法如下：使用JavaScript：HTML本身无法直接调用电池状态API，需要借助JavaScript来实现。浏览器兼容性：该功能依赖于浏览器对navigator.getBattery()的支持，目前主要支持Chrome、Edge等基于Chromium的浏览器。代码示例：navigator.getBattery().then(function(battery)

想在网页中实时获取设备电量？HTML 的 Battery Status API（navigator.getBattery()）虽是标准方案，却充满限制：仅 Chrome 38+、Edge 79+ 和 Firefox 109+ 支持，Safari 全系彻底缺席；必须运行在 HTTPS 或 localhost 环境下，HTTP 或 file:// 协议直接失效；移动端几乎全军覆没，Android WebView 和 iOS 均不可靠；即便调用成功，电量值常被系统离散化（如只报整十百分比）、时间预估不准且延迟明显，还需手动监听多个事件动态更新——真正稳定可用的场景，仅限于少数桌面端 HTTPS 环境，实用性远低于预期。

Browser support 与 navigator.getBattery() 是否可用

现代浏览器中，navigator.getBattery() 是获取设备电量状态的唯一标准接口，但它不被所有浏览器支持。Chrome 38+、Edge 79+、Firefox 109+ 支持；Safari 全系不支持（包括 iOS 和 macOS），且没有计划支持的公开信号。

调用前必须先检测是否存在：

if ('getBattery' in navigator) {
  navigator.getBattery().then(battery => {
    console.log(battery.level); // 0–1 之间的数值
  });
} else {
  console.warn('Battery Status API not supported');
}

• 不要假设 navigator.battery 存在——它已被废弃，仅旧版 Chrome 使用过
• 即使支持，navigator.getBattery() 返回的是 Promise，不能同步读取
• 部分 Android WebView 或 PWA 环境下可能因权限策略返回拒绝（如未启用「后台运行」或未通过 HTTPS）

监听电量变化：onchargingchange / onlevelchange / onchargingtimechange

电量信息是动态的，需通过事件监听更新状态，而不是只取一次值。三个核心事件对应不同状态变更：

• onchargingchange：充电状态切换（插拔电源）
• onlevelchange：电量百分比变化 ≥ 1%（注意：不是每次 0.1% 都触发）
• onchargingtimechange：预估充满/耗尽时间变化（受负载影响大，精度低）

推荐写法（避免重复绑定）：

navigator.getBattery().then(battery => {
  const update = () => {
    console.log({
      level: battery.level,
      charging: battery.charging,
      chargingTime: battery.chargingTime, // 秒数，Infinity 表示未知或已满
      dischargingTime: battery.dischargingTime
    });
  };

  battery.addEventListener('levelchange', update);
  battery.addEventListener('chargingchange', update);
  battery.addEventListener('chargingtimechange', update);

  update(); // 立即触发一次
});

level 值不准？注意离散化和系统上报延迟

battery.level 是只读属性，范围为 0–1，但实际值往往被系统离散化处理。例如某些 Android 设备只上报 100% → 90% → 80%… 的整十数值，中间变化不会触发 levelchange。

• 不要用 battery.level === 0.5 做精确判断，改用范围比较：battery.level < 0.2
• battery.chargingTime 和 battery.dischargingTime 在多数设备上初始为 Infinity，需等待几秒才可能变为具体数值
• 部分笔记本在合盖休眠后，battery.level 可能长时间不更新，直到用户唤醒设备

HTTPS 与安全上下文限制

navigator.getBattery() 只能在安全上下文中使用——即页面必须通过 HTTPS（localhost 也允许），HTTP 页面会静默失败，Promise 永远 pending 或直接 reject。

• 开发时若用 file:// 协议打开 HTML，API 必然不可用
• 某些企业内网环境即使用了 HTTPS，但证书不受信任，也会导致 API 不可用
• Service Worker 中无法访问该 API（不在 window 上下文）

真正能稳定用起来的场景其实很窄：HTTPS + 主流 Chromium/Firefox 桌面端 + 用户已授权（无显式弹窗，但依赖底层系统权限）。移动端基本可视为不可用。

到这里，我们也就讲完了《HTML调用电池状态API获取电量的方法如下：使用JavaScript：HTML本身无法直接调用电池状态API，需要借助JavaScript来实现。浏览器兼容性：该功能依赖于浏览器对navigator.getBattery()的支持，目前主要支持Chrome、Edge等基于Chromium的浏览器。代码示例：navigator.getBattery().then(function(battery){console.log('电量：'+battery.level*100+'%');console.log('充电状态：'+(battery.charging?'正在充电':'未充电'));console.log('充电时间：'+battery.chargingTime+'秒');console.log('放电时间：'+battery.dischargingTime+'秒');});注意事项：该API需要用户交互（如点击事件）触发，不能在页面加载时自动调用。部分浏览器可能不支持或限制该功能。SEO优化建议：标题可写为：HTML如何获取电池电量和状态？（符合百度SEO，字数控制在20字以内）内容中需包含关键词如“HTML电池API”、“JavaScript电量检测”等，提升搜索排名。》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！