深入解讀pageshow

一、pageshow事件是什麼

在Web頁面生命周期中，頁面的展示和隱藏往往需要不同的處理方式。而pageshow事件就是在頁面展示的時候觸發的事件，它與頁面隱藏時的pagehide事件相對應。pageshow事件常用於在頁面顯示後載入新的內容、更新數據等操作。

二、pageshow掛載多次

在一些情況下，我們可能需要多次綁定pageshow事件來實現不同的邏輯處理。例如，在單頁面應用程序中，我們可能需要在不同的頁面中監聽pageshow事件，以實現頁面切換時的數據和視圖更新。此時，我們需要使用addEventListener方法來綁定該事件：

document.addEventListener('pageshow', function(event) {
  console.log('頁面展示了');
});

當我們需要在多個頁面中監聽同一事件時，也可以使用類似於事件委託的方式，將pageshow事件綁定在父元素上：

var parent = document.querySelector('.page-wrap');
parent.addEventListener('pageshow', function(event) {
  console.log('頁面展示了');
});

三、pageshow事件兼容

在各種瀏覽器中，pageshow事件的兼容性並不相同。在一些老舊的瀏覽器中，可能並不支持pageshow事件，而在一些移動端瀏覽器中，該事件的觸發機制也與桌面端瀏覽器稍有不同。

為了確保pageshow事件的正確觸發，在綁定該事件時，我們需要判斷使用瀏覽器是否支持該事件，如果不支持，我們可以嘗試使用舊的事件名（例如onload）來實現相同的效果：

if ('pageshow' in window) {
  window.addEventListener('pageshow', function(event) {
    console.log('頁面展示了');
  });
} else {
  window.addEventListener('load', function(event) {
    console.log('頁面展示了');
  });
}

四、pageshow事件不觸發

在一些情況下，可能會出現pageshow事件無法觸發的情況。其中最常見的原因是頁面使用了緩存，導致頁面沒有真正地載入。此時，我們可以使用pageshow事件的persisted屬性來判斷頁面是否是從瀏覽器緩存中載入的：

window.addEventListener('pageshow', function(event) {
  if (event.persisted) {
    console.log('從緩存中載入頁面');
  } else {
    console.log('頁面重新載入');
  }
});

五、pageshow只執行一次

在一些場景下，我們可能需要pageshow事件僅執行一次，例如在頁面初次載入時進行數據初始化。此時，我們可以使用一次性事件綁定的方法（即綁定事件後立即解綁該事件）來實現：

function init() {
  console.log('頁面初始化');
  window.removeEventListener('pageshow', init);
}
window.addEventListener('pageshow', init);

這裡通過addEventListener方法綁定一個一次性事件init，當該事件執行時，它會解綁pageshow事件。

六、pageshow只觸發一次

在一些情況下，我們需要確保pageshow事件僅在頁面初次顯示時觸發，而在頁面重新顯示（例如用戶按下前進、後退按鈕時），不再觸發。此時，我們可以使用一次性的事件綁定方法和一個標記變數來實現：

var hasLoaded = false;
function init() {
  console.log('頁面初始化');
  window.removeEventListener('pageshow', init);
}
window.addEventListener('pageshow', function(event) {
  if (!hasLoaded) {
    hasLoaded = true;
    init();
  }
});

這裡定義了一個標記變數hasLoaded，表示頁面是否已經被初次載入過。在pageshow事件被觸發時，我們檢查這個變數是否為false，如果是，則表示頁面初次載入，我們執行初始化操作並將標記變數設置為true，否則表示頁面已經被載入過（可能是從緩存中載入），不再執行初始化操作。

七、pageshow畫面載入完觸發

在一些場景下，我們可能需要在頁面畫面載入完畢後執行一些操作，例如，測量頁面元素布局尺寸等。此時，我們可以使用DOMContentLoaded事件（即頁面DOM結構載入完成後立即觸發的事件）和pageshow事件配合使用：

document.addEventListener('DOMContentLoaded', function(event) {
  console.log('DOM結構載入完成');
});
window.addEventListener('pageshow', function(event) {
  console.log('頁面展示了');
});

這裡通過綁定DOMContentLoaded事件和pageshow事件，分別在DOM結構和頁面展示時觸發相應的操作。

八、pageshow pagehide

除了pageshow事件外，還有一個相對應的事件pagehide，用於在頁面隱藏時執行相應的操作。例如，我們可以在頁面隱藏時保存用戶當前的閱讀進度或表單數據：

window.addEventListener('pagehide', function(event) {
  console.log('頁面隱藏了');
  saveFormData();
});