title 標籤與 Hack 手段：消息提醒

title 標籤與 Hack 手段：消息提醒

作為前端工程師的你對 B/S 架構肯定不陌生，它有很多的優點，比如版本更新方便、跨平臺、跨終端，但在處理某些場景，比如即時通信場景時，就會變得比較麻煩。

因為前後端通信深度依賴 HTTP 協議，而 HTTP 協議採用“請求-響應”模式，這就決定了服務端也只能被動地發送數據。一種低效的解決方案是客戶端通過輪詢機制獲取最新消息（HTML5 下可使用 WebSocket 協議）。

消息提醒功能實現則比較困難，HTML5 標準發佈之前，瀏覽器沒有開放圖標閃爍、彈出系統消息之類的接口，只能藉助一些 Hack 的手段，比如修改 title 標籤來達到類似的效果（HTML5 下可使用 Web Notifications API 彈出系統消息）。

下面這段代碼中，通過定時修改 title 標籤內容，模擬了類似消息提醒的閃爍效果：

let msgNum = 1 // 消息條數

let cnt = 0 // 計數器

const inerval = setInterval(() => {

if(msgNum===0) {

// 通過DOM修改title

document.title += `聊天頁面`

clearInterval(interval)

return

}

const prefix = cnt % 2 ? `新消息(${msgNum})` : ''

document.title = `${prefix}聊天頁面`

}, 1000)

實現效果如下圖所示，可以看到標籤名稱上有提示文字在閃爍。

通過模擬消息閃爍，可以讓用戶在瀏覽其他頁面的時候，及時得知服務端返回的消息。

定時修改 title 標籤內容，除了用來實現閃爍效果之外，還可以製作其他動畫效果，比如文字滾動，但需要注意瀏覽器會對 title 標籤文本進行去空格操作。

動態修改 title 標籤的用途不僅在於消息提醒，你還可以將一些關鍵信息顯示到標籤上（比如下載時的進度、當前操作步驟），從而提升用戶體驗。