Javascript 使用 Visibility API 更改网站图标

发布于07月17日

我看过一些网站(discord.hotjar)，当标签处于非活动状态时，使用Visibility API显示一个项目符号，当它再次处于活动状态时，将其隐藏，

我们怎么做？

推荐答案

为此，您需要 for each 模式创建两个不同的favicon，并使用Visibility API在它们之间切换.类似这样:

// Set the name of the hidden property and the change event for visibility
let hidden;
let visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}

var link = document.querySelector("link[rel~='icon']");
if (!link) {
    link = document.createElement('link');
    link.rel = 'icon';
    document.getElementsByTagName('head')[0].appendChild(link);
}

function handleVisibilityChange() {
  if (document[hidden]) {
    link.href = 'https://www.linkpicture.com/q/favicon2.ico';
  } else {
    link.href = 'https://www.linkpicture.com/q/favicon1_1.ico';
  }
}

// Warn if the browser doesn't support addEventListener or the Page Visibility API
if (typeof document.addEventListener === "undefined" || hidden === undefined) {
  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {
  // Handle page visibility change
  document.addEventListener(visibilityChange, handleVisibilityChange, false);
}

Preview: