Verwenden des Caching in Firefox 1.5

Neue Browser-Ereignisse

Wenn Sie diese neuen Ereignisse verwenden, werden Ihre Seiten weiterhin korrekt in anderen Browsern angezeigt (wir haben frühere Versionen von Firefox, Internet Explorer, Opera und Safari getestet) und nutzen diese neue Caching-Funktionalität, wenn sie in Firefox 1.5 geladen werden.

Hinweis: Ab 10-2009 haben Entwicklungs-Versionen von Safari Unterstützung für diese neuen Ereignisse hinzugefügt (siehe den WebKit-Bug).

Standardverhalten für Webseiten ist:

1. Benutzer navigiert zu einer Seite.
2. Während die Seite lädt, werden Inline-Skripte ausgeführt.
3. Sobald die Seite geladen ist, wird der onload-Handler ausgelöst.

Einige Seiten umfassen einen vierten Schritt. Wenn eine Seite einen unload- oder beforeunload-Handler verwendet, wird dieser ausgelöst, wenn der Benutzer die Seite verlässt. Wenn ein unload-Handler vorhanden ist, wird die Seite nicht gecachet.

Wenn ein Benutzer zu einer gecachten Seite navigiert, werden Inline-Skripte und der onload-Handler nicht ausgeführt (Schritte 2 und 3), da in den meisten Fällen die Auswirkungen dieser Skripte erhalten geblieben sind.

Wenn die Seite Skripte oder andere Verhaltensweisen enthält, die während des Ladens ausgelöst werden und die Sie jedes Mal ausführen lassen möchten, wenn der Benutzer zu der Seite navigiert, oder wenn Sie wissen möchten, wann ein Benutzer zu einer gecachten Seite navigiert ist, verwenden Sie das neue pageshow-Ereignis.

Wenn Sie Verhaltensweisen haben, die ausgeführt werden, wenn ein Benutzer die Seite verlässt, aber den Vorteil dieser neuen Caching-Funktion nutzen möchten und daher den unload-Handler nicht verwenden möchten, verwenden Sie das neue pagehide-Ereignis.

pageshow-Ereignis

Dieses Ereignis funktioniert genauso wie das load-Ereignis, außer dass es jedes Mal ausgelöst wird, wenn die Seite geladen wird (während das load-Ereignis in Firefox 1.5 nicht ausgelöst wird, wenn die Seite aus dem Cache geladen wird). Das erste Mal, wenn die Seite geladen wird, wird das pageshow-Ereignis direkt nach dem load-Ereignis ausgelöst. Das pageshow-Ereignis verwendet eine boolesche Eigenschaft namens persisted, die bei der initialen Ladung auf false gesetzt ist. Sie wird auf true gesetzt, wenn es sich nicht um die initiale Ladung handelt (in anderen Worten, sie wird auf true gesetzt, wenn die Seite gecachet wird).

Legen Sie alle JavaScripts, die Sie jedes Mal ausführen möchten, wenn eine Seite geladen wird, darauf fest, ausgeführt zu werden, wenn das pageshow-Ereignis ausgelöst wird.

Wenn Sie JavaScript-Funktionen als Teil des pageshow-Ereignisses aufrufen, können Sie sicherstellen, dass diese Funktionen aufgerufen werden, wenn die Seite in anderen Browsern als Firefox 1.5 geladen wird, indem Sie das pageshow-Ereignis als Teil des load-Ereignisses aufrufen, wie im Beispiel später in diesem Artikel gezeigt.

pagehide-Ereignis

Wenn Sie ein Verhalten definieren möchten, das eintritt, wenn der Benutzer die Seite verlässt, aber nicht das unload-Ereignis verwenden möchten (das dazu führen würde, dass die Seite nicht gecachet wird), können Sie das neue pagehide-Ereignis verwenden. Wie pageshow verwendet das pagehide-Ereignis eine boolesche Eigenschaft namens persisted. Diese Eigenschaft wird auf false gesetzt, wenn die Seite vom Browser nicht gecachet wird und auf true, wenn die Seite vom Browser gecachet wird. Wenn diese Eigenschaft auf false gesetzt ist, wird der unload-Handler, falls vorhanden, direkt nach dem pagehide-Ereignis ausgelöst.

Firefox 1.5 versucht, Ladeereignisse in der gleichen Reihenfolge zu simulieren, in der sie beim ersten Laden der Seite auftreten würden. Frames werden genauso behandelt wie das Dokument auf der obersten Ebene. Wenn die Seite Frames enthält, dann werden beim Laden der gecachten Seite:

• pageshow-Ereignisse von jedem Frame ausgelöst, bevor das pageshow-Ereignis im Hauptdokument ausgelöst wird.
• Wenn der Benutzer von der gecachten Seite weg navigiert, wird das pagehide-Ereignis von jedem Frame ausgelöst, bevor das pagehide-Ereignis im Hauptdokument ausgelöst wird.
• Bei Navigationen, die innerhalb eines einzelnen Frames stattfinden, werden Ereignisse nur im betroffenen Frame ausgelöst.

Beispielcode

Das folgende Beispiel zeigt eine Seite, die sowohl das load- als auch das pageshow-Ereignis verwendet. Diese Beispielseite verhält sich wie folgt:

• In Browsern außer Firefox 1.5 tritt Folgendes jedes Mal auf, wenn die Seite geladen wird: Das load-Ereignis löst die onLoad-Funktion aus, die die onPageShow-Funktion aufruft (sowie eine zusätzliche Funktion).
• In Firefox 1.5 funktioniert das load-Ereignis beim ersten Laden der Seite genauso wie in anderen Browsern. Zusätzlich wird das pageshow-Ereignis ausgelöst, und da persisted auf false gesetzt ist, tritt keine zusätzliche Aktion ein.
• In Firefox 1.5 wird beim Laden der Seite aus dem Cache nur das pageshow-Ereignis ausgelöst. Da persisted auf true gesetzt ist, werden nur die JavaScript-Aktionen in der onPageShow-Funktion ausgelöst.

In diesem Beispiel:

• Die Seite berechnet und zeigt jedes Mal, wenn die Seite geladen wird, das aktuelle Datum und die Uhrzeit. Diese Berechnung umfasst die Sekunden und Millisekunden, damit Sie die Funktionalität leicht testen können.
• Der Cursor wird bei der ersten Ladung der Seite in das Namensfeld des Formulars gesetzt. In Firefox 1.5 bleibt der Cursor beim Zurückkehren zur Seite im Feld, in dem er sich befand, als der Benutzer die Seite verließ. In anderen Browsern kehrt der Cursor in das Namensfeld zurück.

<!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>

Im Gegensatz dazu, wenn die obige Seite nicht auf das pageshow-Ereignis hören würde und alle Berechnungen als Teil des load-Ereignisses behandelt würden (und stattdessen wie im folgenden Codeausschnitt gezeigt kodiert wäre), würden sowohl die Cursorposition als auch das Datum/die Uhrzeit in Firefox 1.5 gecachet, wenn der Benutzer die Seite verließ. Wenn der Benutzer zur Seite zurückkehrte, würde das gecachte Datum/die Uhrzeit angezeigt.

<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>

Entwicklung von Firefox-Erweiterungen

Firefox 1.5 Erweiterungen müssen diese Caching-Funktionalität berücksichtigen. Wenn Sie eine Firefox-Erweiterung entwickeln, die sowohl mit 1.5 als auch älteren Versionen kompatibel sein soll, stellen Sie sicher, dass sie auf das load-Ereignis für auslösbare Aktionen, die gecachet werden können, und auf das pageshow-Ereignis für auslösbare Aktionen hört, die nicht gecachet werden sollen.

Zum Beispiel sollte die Google Toolbar für Firefox auf das load-Ereignis für die Autolink-Funktion und auf das pageshow-Ereignis für die PageRank-Funktion hören, um sowohl mit 1.5 als auch mit älteren Versionen kompatibel zu sein.