問題描述
我們先看下面這一張效果圖：
效果圖
需求
當離開或進入tab標籤頁時，動態更改tab的title內容顯示
解決方案
其實很簡單，只是一時間我們可能想不到，不過Web的發明設計者們，早就想到了，並提供了相關的api
監聽visibilitychange事件搭配document.hidden屬性值
visibilitychange
visibilitychange是一個事件名- 此事件的觸發取決於選項卡的內容可見或被隱藏時
- 可以使用
document去監聽這個事件的變化，從而做一些邏輯的操作
document.hidden
- 表示頁面是（true）否（false）隱藏
- 可以理解為進入tab標籤頁和離開tab標籤頁
另有document.visibilityState為visible或hidden（常用），一個意思
知道這兩個api，那相關的需求，就能解決啦
程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="http://ashuai.work/static/img/avantar.png">
<title>?歡迎歡迎?</title>
</head>
<body>
<script>
/**
* 標籤頁標題切換
* */
// 監聽visibilitychange事件
document.addEventListener("visibilitychange", function () {
console.log('document.visibilityState', document.visibilityState);
// 若是離開此tab標籤頁
if (document.hidden) {
document.title = "?你快回來?"
}
// 若是進入此tab標籤頁
else {
document.title = "?歡迎歡迎?"
}
});
</script>
</body>
</html>延伸使用場景
實際上，在工作中，頁面離開或隱藏觸發相應的邏輯，還是有一些場景的。如下：
- 在當前頁播放音樂，離開當前頁暫停音樂
- 線上做面試題時，看看求職者有沒有離開當前tab頁，去百度答案啥的
- 離開當前tab頁，給頁面加上密碼，進入時需輸入密碼（隱私安全問題）
- 一些blog的title效果，比如筆者的這個blog：http://ashuai.work:8890/
官方api地址：
- visibilitychange：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/vis...
- document.hidden：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/hidden
- visibilityState：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/vis...