使用 Firefox 1.5 快取

Firefox 1.5 在單個瀏覽器會話期間，會將整個網頁（包括其 JavaScript 狀態）儲存在記憶體中快取。在已訪問頁面之間來回導航無需重新載入頁面，JavaScript 狀態也會得到保留。此功能被一些人稱為 bfcache（“後退-前進快取”的縮寫），可大大加快頁面導航速度。此快取狀態會一直保留，直到使用者關閉瀏覽器。

在某些情況下，Firefox 不會快取頁面。以下是一些常見的導致頁面未被快取的程式化原因：

頁面使用了 unload 或 beforeunload 事件處理程式；
頁面設定了“cache-control: no-store”。
站點是 HTTPS 並且頁面至少設定了以下任一項：
- “Cache-Control: no-cache”
- “Pragma: no-cache”
- 設定了“Expires: 0”或“Expires”的值（相對於“Date”頭的值，該值為過去的時間）（除非同時指定了“Cache-Control: max-age=”）；
使用者導航離開頁面時頁面尚未完全載入，或由於其他原因（例如 XMLHttpRequest）存在待處理的網路請求；
頁面存在正在進行的 IndexedDB 事務；
頂層頁面包含框架（例如 <iframe>），而這些框架由於此處列出的任何原因都無法快取；
頁面位於框架內，並且使用者在該框架內載入了一個新頁面（在這種情況下，當用戶導航離開頁面時，快取的是最後載入到框架中的內容）。

此新的快取功能改變了頁面的載入行為，Web 作者可能希望：

瞭解頁面何時被導航（在從使用者快取載入時）
定義使用者離開頁面時的頁面行為（同時仍允許頁面被快取）

兩個新的瀏覽器事件使 Web 作者能夠同時實現這兩點。

新的瀏覽器事件

如果您使用這些新事件，您的頁面在其他瀏覽器中（我們已測試 Firefox、Internet Explorer、Opera 和 Safari 的早期版本）將繼續正常顯示，並在 Firefox 1.5 中載入時使用此新快取功能。

注意：截至 2009 年 10 月，Safari 的開發版本已新增對這些新事件的支援（請參閱 WebKit bug）。

Web 頁面的標準行為是：

使用者導航到頁面。
頁面載入時，內嵌指令碼會執行。
頁面載入完成後，將觸發 onload 事件處理程式。

某些頁面包含第四個步驟。如果頁面使用了 unload 或 beforeunload 事件處理程式，則在使用者導航離開頁面時會觸發它們。如果存在 unload 事件處理程式，則頁面將不會被快取。

當用戶導航到已快取的頁面時，內嵌指令碼和 onload 事件處理程式不會執行（步驟 2 和 3），因為在大多數情況下，這些指令碼的效果已得到保留。

如果頁面包含您希望每次使用者導航到頁面時都執行的指令碼或其他行為，或者您想知道使用者何時導航到已快取的頁面，請使用新的 pageshow 事件。

如果您有使用者導航離開頁面時觸發的行為，但希望利用此新快取功能，因此不想使用 unload 事件處理程式，請使用新的 pagehide 事件。

此事件的工作方式與 load 事件相同，不同之處在於它在頁面每次載入時都會觸發（而 load 事件在 Firefox 1.5 中從快取載入頁面時不會觸發）。首次載入頁面時，pageshow 事件在 load 事件觸發後立即觸發。pageshow 事件使用一個名為 persisted 的布林屬性，該屬性在初始載入時設定為 false。如果不是初始載入（換句話說，當頁面被快取時），則設定為 true。

將您希望在每次頁面載入時執行的任何 JavaScript 設定為在 pageshow 事件觸發時執行。

如果您在 pageshow 事件中呼叫 JavaScript 函式，可以透過呼叫 load 事件中的 pageshow 事件來確保這些函式在 Firefox 1.5 以外的瀏覽器中載入頁面時被呼叫，如本文後面的示例所示。

pagehide 事件

如果您想定義使用者導航離開頁面時發生的行為，但又不想使用 unload 事件（這會導致頁面不被快取），可以使用新的 pagehide 事件。與 pageshow 類似，pagehide 事件也使用一個名為 persisted 的布林屬性。如果頁面未被瀏覽器快取，此屬性設定為 false；如果頁面被瀏覽器快取，則設定為 true。當此屬性設定為 false 時，如果存在 unload 事件處理程式，它將在 pagehide 事件之後立即觸發。

Firefox 1.5 會嘗試模擬與頁面初始載入時相同的順序的載入事件。框架的處理方式與頂層文件相同。如果頁面包含框架，則在載入快取頁面時：

每個框架的 pageshow 事件在主文件的 pageshow 事件之前觸發。
當用戶導航離開快取頁面時，每個框架的 pagehide 事件在主文件的 pagehide 事件之前觸發。
對於單個框架內的導航，事件僅在受影響的框架中觸發。

示例程式碼

下面的示例演示了一個使用 load 和 pageshow 事件的頁面。此示例頁面行為如下：

在 Firefox 1.5 以外的瀏覽器中，每次載入頁面時都會發生以下情況：load 事件觸發 onLoad 函式，該函式呼叫 onPageShow 函式（以及一個附加函式）。
在 Firefox 1.5 中，首次載入頁面時，load 事件的執行方式與其他瀏覽器相同。此外，pageshow 事件也會觸發，並且由於 persisted 設定為 false，不會發生其他操作。
在 Firefox 1.5 中，當頁面從快取載入時，只有 pageshow 事件會觸發。由於 persisted 設定為 true，只有 onPageShow 函式中的 JavaScript 操作會被觸發。

在此示例中

該頁面每次載入頁面時都會計算並顯示當前日期和時間。此計算包括秒和毫秒，因此您可以輕鬆測試其功能。
首次載入頁面時，游標會放置在表單的“Name”欄位中。在 Firefox 1.5 中，當用戶返回到頁面時，游標會保留在使用者導航離開頁面時的欄位中。在其他瀏覽器中，游標會移回“Name”欄位。

html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Order query Firefox 1.5 Example</title>
    <style type="text/css">
      body,
      p {
        font-family: "Verdana", sans-serif;
        font-size: 12px;
      }
    </style>
    <script>
      function onLoad() {
        loadOnlyFirst();
        onPageShow();
      }

      function onPageShow() {
        // Calculate current time
        var currentTime = new Date();
        var year = currentTime.getFullYear();
        var month = currentTime.getMonth() + 1;
        var day = currentTime.getDate();
        var hour = currentTime.getHours();
        var min = currentTime.getMinutes();
        var sec = currentTime.getSeconds();
        var mil = currentTime.getMilliseconds();
        var displayTime =
          month +
          "/" +
          day +
          "/" +
          year +
          " " +
          hour +
          ":" +
          min +
          ":" +
          sec +
          ":" +
          mil;
        document.getElementById("time-field").value = displayTime;
      }

      function loadOnlyFirst() {
        document.zipForm.name.focus();
      }
    </script>
  </head>
  <body onload="onLoad();" onpageshow="if (event.persisted) onPageShow();">
    <h2>Order query</h2>

    <form
      name="zipForm"
      action="http://www.example.com/formresult.html"
      method="get">
      <label for="time-field">Date and time:</label>
      <input type="text" id="time-field" /><br />
      <label for="name">Name:</label>
      <input type="text" id="name" /><br />
      <label for="address">Email address:</label>
      <input type="text" id="address" /><br />
      <label for="order">Order number:</label>
      <input type="text" id="order" /><br />
      <input type="submit" name="submit" value="Submit Query" />
    </form>
  </body>
</html>

相比之下，如果上述頁面不監聽 pageshow 事件，而是在 load 事件中處理所有計算（而是按照以下程式碼片段示例所示編寫），那麼在 Firefox 1.5 中，當用戶導航離開頁面時，游標位置和日期/時間都將被快取。當用戶返回到頁面時，將顯示快取的日期/時間。

html

<head>
  <script>
    function onLoad() {
      loadOnlyFirst();

      // Calculate current time
      var currentTime = new Date();
      var year = currentTime.getFullYear();
      var month = currentTime.getMonth() + 1;
      var day = currentTime.getDate();
      var hour = currentTime.getHours();
      var min = currentTime.getMinutes();
      var sec = currentTime.getSeconds();
      var mil = currentTime.getMilliseconds();
      var displayTime =
        month +
        "/" +
        day +
        "/" +
        year +
        " " +
        hour +
        ":" +
        min +
        ":" +
        sec +
        ":" +
        mil;
      document.getElementById("time-field").value = displayTime;
    }

    function loadOnlyFirst() {
      document.zipForm.name.focus();
    }
  </script>
</head>

<body onload="onLoad();"></body>