不常用卻很有妙用的事件及方法

wangduanduan發表於2019-02-16
事件

1 visibilitychange事件

觸發條件：瀏覽器標籤頁被隱藏或顯示的時候會觸發visibilitychange事件.

使用場景：當標籤頁顯示或者隱藏時，觸發一些業務邏輯

document.addEventListener("visibilitychange", function() {
  console.log( document.visibilityState );
});

2 storage事件

觸發條件：使用localStorage or sessionStorage儲存或者修改某個本地儲存時

使用場景：標籤頁間通訊

// AB頁面同源
// 在A 頁面
window.addEventListener(`storage`, (e) => {console.log(e)})

// 在B 頁面，向120打個電話
localStorage.setItem(`makeCall`,`120`)

// 然後可以在A頁面間有輸出, 可以看出A頁面 收到了B頁面的通知
...key: "makeCall", oldValue: "119", newValue: "120", ...

3 beforeunload事件

觸發條件：當頁面的資源將要解除安裝(及重新整理或者關閉標籤頁前). 當頁面依然可見，並且該事件可以被取消只時

使用場景：關閉或者重新整理頁面時彈窗確認，關閉頁面時向後端傳送報告等

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "o/";

  e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
  return confirmationMessage;              // Gecko, WebKit, Chrome <34
});

4 navigator.sendBeacon

這個方法主要用於滿足 統計和診斷程式碼 的需要，這些程式碼通常嘗試在解除安裝（unload）文件之前向web伺服器傳送資料。過早的傳送資料可能導致錯過收集資料的機會。然而， 對於開發者來說保證在文件解除安裝期間傳送資料一直是一個困難。因為使用者代理通常會忽略在解除安裝事件處理器中產生的非同步 XMLHttpRequest 。

使用 sendBeacon() 方法，將會使使用者代理在有機會時非同步地向伺服器傳送資料，同時不會延遲頁面的解除安裝或影響下一導航的載入效能。這就解決了提交分析資料時的所有的問題：使它可靠，非同步並且不會影響下一頁面的載入。此外，程式碼實際上還要比其他技術簡單！

注意：該方法在IE和safari沒有實現

使用場景：傳送崩潰報告

window.addEventListener(`unload`, logData, false);

function logData() {
    navigator.sendBeacon("/log", analyticsData);
}

相關文章