Gibt es ein Cross-Browser-onload-Ereignis, wenn die Zurück-Taste zu klicken?

https://stackoverflow.com/questions/158319

03-07-2019
|

Frage

Für alle gängigen Browser (außer IE), das JavaScript onload Ereignis wird nicht ausgelöst, wenn die Seite geladen wird als Folge einer Rück Knopf-Bedienung -. Es wird nur ausgelöst, wenn die Seite zum ersten Mal geladen wird

Kann mir jemand Punkt zu einem bestimmten Muster Cross-Browser-Code (Firefox, Opera, Safari, IE, ...), die dieses Problem löst? Ich bin mit Firefox pageshow Ereignisse vertraut, aber leider weder Opera noch Safari dieses umzusetzen.

Lösung

Leute, fand ich, dass JQuery nur ein Effekt hat: die Seite neu geladen wird, wenn die Zurück-Taste gedrückt wird. Das hat nichts mit dem zu tun " fertig ".

Wie funktionierts? Nun, JQuery fügt ein onunload Ereignis-Listener.

// http://code.jquery.com/jquery-latest.js
jQuery(window).bind("unload", function() { // ...

In der Standardeinstellung es tut nichts. Aber irgendwie scheint dies einen erneuten Laden in Safari, Opera und Mozilla auslösen -. Egal, was die Event-Handler enthalten

[ Bearbeiten (Nickolay) : hier ist, warum es so funktioniert: webkit.org , developer.mozilla. org . Bitte lesen Sie diese Artikel (oder meine Zusammenfassung in einer separaten Antwort unten) und prüfen, ob Sie wirklich müssen dies tun, und Ihre Seite zu laden langsamer für die Benutzer machen.]

Kann es nicht glauben? Versuchen Sie folgendes:

<body onunload=""><!-- This does the trick -->
<script type="text/javascript">
    alert('first load / reload');
    window.onload = function(){alert('onload')};
</script>
<a href="http://stackoverflow.com">click me, then press the back button</a>
</body>

Sie werden ähnliche Ergebnisse sehen, wenn JQuery verwendet wird.

Sie möchten können diese ohne onunload

vergleichen

<body><!-- Will not reload on back button -->
<script type="text/javascript">
    alert('first load / reload');
    window.onload = function(){alert('onload')};
</script>
<a href="http://stackoverflow.com">click me, then press the back button</a>
</body>

Andere Tipps

Einige modernen Browser (Firefox, Safari und Opera, aber nicht Chrome) die besondere Unterstützung „vor / zurück“ Cache (Ich werde es nennen bfcache, was ein Begriff, der von Mozilla erfunden ist) beteiligt, wenn der Benutzer zurück navigiert . Im Gegensatz zu der regulären (HTTP) Cache, fängt es den vollständigen Zustand der Seite (einschließlich des Zustands von JS, DOM). Dies ermöglicht es, die Seite schneller neu zu laden und genau so, wie der Benutzer es verlassen hat.

Das load Ereignis soll nicht schießen, wenn die Seite von diesem bfcache geladen wird. Zum Beispiel erstellt, wenn Sie Ihre UI in den „Last“ Handler und die „load“ -Ereignis wurde einmal auf der Anfangslast gefeuert, und das zweite Mal, wenn die Seite aus dem bfcache neu geladen, würde die Seite am Ende mit duplizieren UI-Elemente.

Dies ist auch, warum das Hinzufügen der „entladen“ Handler stoppt die Seite aus in der bfcache gespeichert werden (so dass es langsamer zurück zu navigieren) - die Entlade-Handler Bereinigungsaufgaben durchführen könnte, was die Seite verlassen konnte in undurchführbar Zustand.

Für Seiten, die wissen müssen, wenn sie / navigiert weg wir Sie wieder auf, Firefox 1.5+ und die Version von Safari mit dem Update für Bug 28758 besondere Ereignisse genannt zu unterstützen."

Referenzen:

Ich lief in ein Problem, das meine js nicht ausgeführt wurde, als der Benutzer zurück oder nach vorne geklickt hatte. Ich habe zuerst von Caching um den Browser zu beenden, aber das schien nicht das Problem zu sein. Meine Javascript wurde eingestellt, nachdem alle Bibliotheken usw. geladen wurden auszuführen. Ich habe diese mit dem Readystatechange-Ereignis.

Nach einigen Tests fand ich heraus, dass das Readystate eines Elements in einer Seite, wo wieder angeklickt wurde, ist nicht ‚beladen‘, sondern ‚vollständig‘. Hinzufügen || element.readyState == 'complete' meiner bedingte Anweisung meine Probleme gelöst.

dachte, ich würde meine Erkenntnisse teilen, hoffentlich helfen sie jemand anderes.

Bearbeiten auf Vollständigkeit

Mein Code sah wie folgt aus:

script.onreadystatechange(function(){ 
   if(script.readyState == 'loaded' || script.readyState == 'complete') {
      // call code to execute here.
   } 
});

In dem Codebeispiel über der Skriptvariable war ein neu erstelltes Skript Element, das auf das DOM hinzugefügt worden war.

OK, hier ist eine endgültige Lösung auf ckramer anfänglichen Lösung und palehorse dem Beispiel basiert, die, einschließlich Opera in allen Browsern funktioniert. Wenn Sie history.navigationMode zu ‚kompatibel‘ dann jQuery-Ready-Funktion wird ausgelöst, auf Back-Taste Operationen in Opera sowie die anderen wichtigen Browsern eingestellt.

Diese Seite hat weitere Informationen .

Beispiel:

history.navigationMode = 'compatible';
$(document).ready(function(){
  alert('test');
});

Getestet habe ich diese in Opera 9.5, IE7, FF3 und Safari und es funktioniert in allen von ihnen.

Ich konnte nicht die obigen Beispiele zu arbeiten. Ich wollte einfach eine Aktualisierung bestimmter modifizierten div Bereiche auszulösen, wenn wieder auf der Seite über die Zurück-Taste kommen. Der Trick, den ich verwendet wurde, war ein verstecktes Eingabefeld auf 1 gesetzt, sobald die div Bereiche von den ursprünglichen (ein „Dirty-Bit“ bezeichnet) geändert. Das versteckte Eingabefeld behält tatsächlich seinen Wert, wenn ich auf zurück, so onload ich für dieses Bit überprüfen. Wenn es gesetzt ist, aktualisiere ich die Seite (oder aktualisieren Sie einfach die divs). Auf der ursprünglichen Belastung, jedoch ist das Bit nicht gesetzt, so dass ich verschwende keine Zeit zweimal die Seite geladen wird.

<input type='hidden' id='dirty'>

<script>
$(document).ready(function() {
  if ($('#dirty').val()) {
    // ... reload the page or specific divs only
  }
  // when something modifies a div that needs to be refreshed, set dirty=1
  $('#dirty').val('1');
});
</script>

Und es auslösen würde richtig, wenn ich die Zurück-Button geklickt habe.

Wenn ich mich recht erinnere, dann Entladeverzeichnis () Ereignis Hinzufügen bedeutet, dass Seite nicht (in Vorwärts / Rückwärts-Cache) zwischengespeichert werden - weil es Zustandsänderungen ist / kann sich ändern, wenn der Benutzer die Seite verlässt. Also -. Es nicht sicher ist, das in letzter Sekunde Zustand der Seite, wenn es durch die Navigation durch die Geschichte Objekt Rückkehr zur Wiederherstellung

dachte ich, das für „onunload“ sein würde, nicht Seite zu laden, sind da nicht reden wir über ein Ereignis feuern, wenn „Back“ schlagen? $ Document.ready () ist für Veranstaltungen auf Seite Last erwünscht ist, egal, wie Sie zu dieser Seite zu erhalten (dh umleiten, um den Browser zu der URL zu öffnen direkt, etc.), nicht, wenn „Zurück“ klicken, es sei denn, Sie sprechen über das, was auf der vorherigen Seite zu feuern, wenn es wieder lädt. Und ich bin nicht sicher, dass die Seite nicht zwischengespeichert zu werden, wie ich gefunden habe, dass Javascripts noch, auch wenn $ document.ready () ist in ihnen enthalten ist. Wir hatten Strg + F5 zu treffen, wenn unsere Scripts bearbeiten, die dieses Ereignis haben, wenn wir sie überarbeiten, und wir wollen die Ergebnisse in unseren Seiten testen.

$(window).unload(function(){ alert('do unload stuff here'); });

ist, was Sie für ein onunload Ereignis wollen würden, wenn „Back“ schlagen und die aktuelle Seite Entladen, und würden auch ausgelöst, wenn ein Benutzer das Browser-Fenster geschlossen wird. Das klang mehr wie das, was gewünscht war, auch wenn ich mit dem $ document.ready () Antworten bin zahlenmäßig überlegen gewesen. Grundsätzlich ist der Unterschied zwischen einem Ereignisse auf der aktuellen Seite Brennen, während es geschlossen oder auf dem einen, die geladen wird, wenn Sie auf „Zurück“, wie es geladen wird. Getestet im IE 7 in Ordnung, kann für die anderen Browser nicht sprechen, da sie nicht erlaubt sind, wo wir sind. Aber dies könnte eine weitere Option sein.

kann ich bestätigen, dass ckramer jQuery bereit Ereignis arbeitet in IE und FireFox. Hier ist ein Beispiel:

<html>
<head>
    <title>Test Page</title>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script type="text/javascript">
            $(document).ready(function () {
               var d = new Date();
               $('#test').html( "Hi at " + d.toString() );
            });
    </script>
</head>
<body>
    <div id="test"></div>
    <div>
        <a href="http://www.google.com">Go!</a>
    </div>
</body>
</html>

für die Menschen, die nicht wollen, die ganze jQuery-Bibliothek verwenden i die Umsetzung in separaten Code extrahiert. Es ist nur 0,4 KB groß.

Sie können den Code finden, zusammen mit einem Deutsch-Tutorial in diesem Wiki: http://www.easy-coding.de/wiki/html-ajax-und- co / onload-Event-Cross-Browser-kompatibler-domcontentloaded.html

jQuery bereit Veranstaltung wurde für genau diese Art von Problem geschaffen. Vielleicht möchten Sie in die Umsetzung graben, um zu sehen, was unter der Decke vor sich geht.

Bill, wage ich Ihre Frage zu beantworten, aber ich bin nicht 100% sicher mit meinen Vermutungen. Ich denke, dass andere dann Browser IE, wenn Benutzer auf einer Seite in der Geschichte nehmen werde nicht nur die Seite und ihre Ressourcen aus dem Cache geladen werden, aber sie werden auch den gesamten DOM (lesen Sitzung) Zustand für ihn wieder ein. IE nicht tut DOM Restauration (oder bei Leasing nicht tat) und damit das Onload-Ereignis sieht es für die richtige Seite Neuinitialisierung notwendig.

habe ich versucht, die Lösung von Bill mit $ (document) .ready ... aber zuerst hat es nicht funktioniert. Ich entdeckte, dass, wenn das Skript nach dem HTML-Abschnitt platziert ist, wird es nicht funktionieren. Wenn es der Kopfabschnitt ist funktioniert es aber nur im Internet Explorer. Das Skript funktioniert nicht in Firefox.

OK, habe ich versucht, diese und es funktioniert in Firefox 3, Safari 3.1.1 und IE7 aber nicht in Opera 9.52.
Wenn Sie das Beispiel verwenden unten (auf palehorse dem Beispiel basiert), erhalten Sie eine Warnung Pop-up, wenn die Seite geladen wird. Aber wenn man dann auf eine andere URL gehen, und drücken Sie dann auf die Schaltfläche Zurück zu dieser Seite zurück zu gehen, müssen Sie nicht ein Warnfeld Pop-up in Opera bekommen (aber Sie haben in den anderen Browsern).

Wie auch immer, ich denke, das nahe genug für heute. Danke an alle!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<meta http-equiv="expires" content="0">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( 
                    function(){
                      alert('test');
                    }
                 );
</script>
</head>
<body>
<h1>Test of the page load event and the Back button using jQuery</h1>
</body>
</html>

Unload-Ereignis nicht gut funktioniert auf IE 9. Ich versuchte es mit Load-Ereignisse (onload ()), es funktioniert gut auf IE 9 und FF5 .

Beispiel:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    jQuery(window).bind("load", function() {
        $("[name=customerName]").val('');
    });
</script>
</head>
<body>
    <h1>body.jsp</h1>
    <form action="success.jsp">
        <div id="myDiv">

        Your Full Name: <input name="yourName" id="fullName"
            value="Your Full Name" /><br> <br> <input type="submit"><br>

        </div>

    </form>
</body>
</html>

Ich habe eine HTML-Vorlage verwendet. In dieser custom.js Datei Vorlage gab es eine Funktion wie folgt aus:

    jQuery(document).ready(function($) {

       $(window).on('load', function() {
          //...
       });

    });

Aber diese Funktion funktioniert nicht, wenn ich gehe, um nach anderer Seite zurück.

Also, ich versuche dies und es hat funktioniert:

    jQuery(document).ready(function($) {
       //...
    });

   //Window Load Start
   window.addEventListener('load', function() {
       jQuery(document).ready(function($) {
          //...
       });
   });

Nun, ich habe 2 „ready“ Funktion, aber es macht keinen Fehler und die Seite funktioniert sehr gut.

Dennoch muß ich erklären, dass es unter Windows 10 getestet hat - Opera v53 und Edge-v42, aber keine anderen Browser. Denken Sie daran, diese ...

Hinweis: jquery Version war 3.3.1 und Migration von Version war 3.0.0

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow