在 JavaScript 中切换浏览器选项卡时更改图标

我正在浏览网站的时候，看到了一些非常微妙但令人兴奋的东西。

当您在浏览器选项卡之间切换时，图标会发生变化。

当标签不活动时，Favicon更改为原始Favicon的灰度版本，并且当Tab处于活动状态时，将变为原始Favicon。

看起来很酷！

这是执行此操作的代码。

const favicon = document.querySelector('link[rel="icon"]')

document.addEventListener("visibilitychange", () => {
    const hidden = document.hidden

    favicon.setAttribute(
        "href", 
        `/favicon${hidden ? "-hidden" : ""}.ico`
    )
})
COPY

首先，我们使用 querySelector() 方法获取网站图标的实例。然后 visibilitychange 事件用于检测选项卡的内容何时隐藏或可见。并基于此，我们可以操纵网站图标。

创建一个 favicon-hidden.ico 文件（这是原始网站图标的灰度版本）。然后，在选项卡隐藏时，使用 setAttribute() 方法将 link 元素的 href 属性更改为 favicon-hidden.ico 文件。并在选项卡可见时切换回原始图标。

全文完 谢谢！