分頁可視度變更時變換標題跟圖示的方法

有些網站在你切換到其他分頁的時候，在分頁工具列顯示的圖示或標題跟你沒切換時是不一樣的。像是 Astro 的網站的圖示就是這樣，這個是正在使用這個分頁時的樣子：

這個則是正在使用其他分頁時這個分頁的樣子：

分頁的圖示發生了改變。這個有趣的行為是怎麽做到的呢？

翻了這個網站的程式碼，我發現又是用 JavaScript 做到的。程式碼如下：

const favicon = document.querySelector('link[rel="icon"]');
document.addEventListener("visibilitychange", () => {
  const hidden = document.hidden;
  favicon.setAttribute("href", `/favicon${hidden ? "-hidden" : ""}.svg`);
});

它監聽 visibilitychange 事件，當頁面的可視性發生改變時，就觸發這段程式。它以 document.hidden 判斷頁面是否開著，如果這個頁面正開著，就設定圖示為 /favicon.svg，否則就設定為 /favicon-hidden.svg。

除了圖示外，標題也是可以變更的。仿造上面的程式碼，我們也可以在分頁可見或不可見時，分別安排不同的標題：

const title = document.querySelector("title");
document.addEventListener("visibilitychange", () => {
  const hidden = document.hidden;
  title.innerHTML = hidden ? "Next.js" : "Astro";
});

因為分頁工具列中只會顯示分頁的圖示跟標題，所以在這個用途下能做的也只有這麼多了。不過監視頁面的可視性的改變不只有這個用途。有些網站會要求訪客看一定時間的廣告後才能獲得獎勵，例如下載檔案之類的，visibilitychange 事件就可以用來判斷訪客有沒有真的在看廣告。或者是 MDN 介紹這個事件的頁面也有列出幾個範例。

以上就是讓分頁可視或不可視時顯示不同圖示或標題的方法，做網站時如果想發揮玩心時可以用得上。