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

gaara 發布于2019-08-21 18:30 / 3492人閱讀

摘要：過早的發送數據可能導致錯過收集數據的機會。因為用戶代理通常會忽略在卸載事件處理器中產生的異步。使用方法，將會使用戶代理在有機會時異步地向服務器發送數據，同時不會延遲頁面的卸載或影響下一導航的載入性能。

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);
}

云服務器 GPU云服務器常用的域名后綴及含義 jquery常用的方法常用的數據統計方法常用的數據挖掘方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90527.html

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

摘要：過早的發送數據可能導致錯過收集數據的機會。因為用戶代理通常會忽略在卸載事件處理器中產生的異步。使用方法，將會使用戶代理在有機會時異步地向服務器發送數據，同時不會延遲頁面的卸載或影響下一導航的載入性能。 1 visibilitychange事件觸發條件：瀏覽器標簽頁被隱藏或顯示的時候會觸發visibilitychange事件. 使用場景：當標簽頁顯示或者隱藏時，觸發一些業務邏輯 do...

Richard_Gao 2019-08-01 18:19 評論0 收藏0
如何給列表降維？sum()函數的妙用

摘要：上個月，學習群里的同學問了個題目，大意可理解為列表降維，例子如下想得到結果原始數據是一個二維列表，目的是獲取該列表中所有元素的具體值。不經意間，函數的注意事項，竟把其它的進階內容都聯系起來了。小小的函數，竟成為學習之路上的一個樞紐。上個月，學習群里的 S 同學問了個題目，大意可理解為列表降維，例子如下： oldlist = [[1, 2, 3], [4, 5]] # 想得到結果：...

Channe 2019-07-31 10:19 評論0 收藏0
計算機視覺中的深度學習：技術、市場和5個你想不到的未來

摘要：接下來，介紹了使用深度學習的計算機視覺系統在農業零售業服裝量身定制廣告制造等產業中的應用和趨勢，以及在這些產業中值得關注的企業。嵌入式視覺聯盟主編Brian Dipert今天發布博文，介紹了2016年嵌入式視覺峰會（Embedded Vision Summit）中有關深度學習的內容：谷歌工程師Pete Warden介紹如何利用TensorFlow框架，開發為Google Translate...

baukh789 2019-04-25 18:03 評論0 收藏0