navigator.getBattery 找不到

Question

我编写了一个程序，可以列出电池电量并充电到 div 中。我的代码如下。由于某种原因，当我运行它时，它告诉我

navigator.getBattery

不是一个函数。我该如何解决这个问题？

function batttick() {
  navigator.getBattery().then( a=>{
    let m = ""
    let c = ""
    m = battery.level * 100 + "%"
  
    if(a.charging) {
      m+=" ⚡";
      c = "green";
    }
    console.log(c, m);
    document.getElementById("batt").innerHTML = m;
    document.getElementById("batt").style.color = c;
    })
} 
batttick()

Answer 1

在 Google Chrome（版本 100）上运行时不会出现您收到的错误。

看起来有些浏览器不支持

navigator.getBattery()

。请参阅 MDN 上的浏览器兼容性，或参见下表。

浏览器	版本
铬	✅ (>38)
边缘	✅ (>79)
火狐	❌（43-52）
IE	❌（不支持）
歌剧	✅ (>25)
野生动物园	❌（不支持）

^{关键：✅ = 支持，❌ = 不支持。}

如果您发现您使用的浏览器不受支持，您应该升级或切换它，运行代码，然后它应该可以工作。

---

此外，代码中的另一个问题是，当

battery.level

不存在时，您试图获取

battery

。这可能会引发错误。

看起来您想使用返回的

BatteryManager

对象，在本例中为

a

。因此，要修复它，只需使用下面的代码即可。

const m = a.level * 100 + "%";

现在从已定义的

level

变量中获取

a

属性。当您将代码更改为此时，它应该可以正常工作。

Answer 2

您遇到了一个问题，即您使用变量

a

但引用了

battery

。查看我的编辑和工作演示：

function batttick() {
  navigator.getBattery().then(battery => {
    let m = ""
    let c = ""
    m = battery.level * 100 + "%"

    if (battery.charging) {
      m += " ⚡";
      c = "green";
    }
    console.log(c, m);
    document.getElementById("batt").innerHTML = m;
    document.getElementById("batt").style.color = c;
  })
}
batttick()

<div id="batt"></div>

Answer 3

此特定错误消息的一个常见原因是，如果页面未在安全上下文 (HTTPS) 中运行，许多浏览器会阻止电池 API。

检查兼容性图表的“需要安全上下文”行：https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getBattery#browser_compatibility

由于现在这是此错误消息的顶部谷歌搜索结果，因此值得注意，即使这个问题被标记为已解决。