navigator.getBattery 找不到

navigator.getBattery is cannot be found

我制作了一个程序,可以列出电池电量并充电到 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()

在 Google Chrome(版本 100)上 运行ning 时不会出现您遇到的错误。

看起来有些浏览器不支持 navigator.getBattery()。请参阅 browser compatibility on MDN,或参阅下面的 table。

Browser Versions
Chrome ✅ (>38)
Edge ✅ (>79)
Firefox ❌ (43-52)
IE ❌ (no support)
Opera ✅ (>25)
Safari ❌ (no support)

关键:✅ = 支持,❌ = 不支持。

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


此外,您的代码中的另一个问题是您试图获取 battery.level,而 battery 不存在。这可能会引发错误。

您似乎想使用返回的 BatteryManager 对象,在本例中为 a。因此,要修复它,只需使用下面的代码。

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

现在从 already-defined a 变量获取 level 属性。当您将代码更改为此时,它应该可以正常工作。

您在使用变量 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>