Zum erzwingen von Neuladen einer Seite, wenn mit browser-zurück-button?

Muss ich irgendwie erkennen, dass der Nutzer gedrückt hat Browser-zurück-button und laden Sie die Seite mit refresh (Neuladen der Inhalte und CSS) mit jquery.

Zu erkennen, wie eine solche Aktion über jquery?

Weil jetzt einige Elemente werden nicht erneut geladen, wenn ich den zurück-button im browser. Aber wenn ich links in der website ist alles aktualisiert und zeigten richtig.

WICHTIG!

Einige Leute haben wahrscheinlich missverstanden, was ich will. Ich will nicht die aktuelle Seite aktualisieren. Ich will aktualisieren Sie die Seite, die geladen wird, nachdem ich die zurück-Taste drücken. hier ist, was ich meine, in einer ausführlicheren Art und Weise:

  1. Benutzer besucht page1.
  2. während auf page1 - klickt er auf einen link zur page2.
  3. er umgeleitet wird auf der Seite 2
  4. nun (Wichtiger Teil!) klickt er auf den zurück-button im browser, da will er zurück zu page1
  5. er ist wieder auf die Seite 1 - und nun die Seite 1 wird neu geladen und etwas alarmiert, wie "Sie sind zurück!"
  • Statt hacking normale user Verhalten, warum nicht Sie versuchen zu verstehen, warum dein code nicht funktioniert beim laden der Seite, und Sie müssen die Seite neu zu laden?
  • Ich die Klassen ändern, um die änderungen anzeigen. Wenn Benutzer klickt auf etwas, ändert sich der Wert in der Datenbank per ajax. Wenn ajax fertig ist die css-Klasse cahnge zum Beispiel von on zu off. Und es ist ok, es ist gespeichert in der db, sieht der Benutzer alles richtig. Nun klickt er auf einige andere link. Z.B. über uns-Seite, richtig? Nun, er ist auf der über uns-Seite. Werden, beschließt, gehen Sie zurück auf die Vorherige Seite und auf die Schaltfläche zurück klickt im browser. Und wenn er zurück ist, sieht er die änderungen auf der Seite, wie der browser zeigte die Seite (wahrscheinlich einige browser-cahing), bevor er triggerd der ajax (on/off-Klassen)
  • Sind Sie mit get oder post für Ihre Ajax-call?
  • part2.. ich benutze auch data-Attribut, und es hat keine Wirkung. Alles wäre großartig, wenn die Seite erneut geladen wurde. Wenn ich drücken Sie die Taste F5 auf die Seite der Werte, die er verändert über ajax angezeigt werden. Ich denke, das wird einigen browser-chaching Problem, wenn die css/html-Teil wird nicht vollständig geladen. Es lädt nur nach drücken von f5
  • $.ajax({ url: url, method: 'post', processData: false, contentType: false, cache: false, dataType: 'json', data: formData, }) Denken Sie, dass dies könnte werden durch ajax? es wäre toll, wenn dies der Fall war.
InformationsquelleAutor John Doeherskij | 2017-03-27
  1. 45

    Können Sie pageshow Ereignis behandeln die situation, wenn der browser navigiert zu Ihrer Seite durch die Geschichte traversal:

    window.addEventListener( "pageshow", function ( event ) {
  var historyTraversal = event.persisted || 
                         ( typeof window.performance != "undefined" && 
                              window.performance.navigation.type === 2 );
  if ( historyTraversal ) {
    //Handle page restore.
    window.location.reload();
  }
});

    Beachten Sie, dass HTTP-cache zu tun. Sie müssen, setzen Sie die richtigen cache-related HTTP-Header auf server-cache nur die Ressourcen, müssen zwischengespeichert werden. Sie können auch gezwungen reload instuct browser zu ignorieren, HTTP-cache: window.location.reload( true ). Aber ich glaube nicht, dass es die beste Lösung.

    For more information check:

    • Habe ich Hinzugefügt, mehr Beschreibung, mehr klar, was ich will, bitte, Lesen Sie es, Danke. Aber ich werde versuchen, Ihre Lösung als gut.
    • Könnten Sie helfen, den Benutzer zu Dhiraj er ist auf dem richtigen Weg, aber es ist zwei mal nachladen. By the way, ich habe versucht window.addEventListener( "unload", function() {} ); aber es ist nichts zu tun, der zurück-button funktioniert nach wie vor, keinerlei Veränderung ;(
    • Wie zu entladen BFCache? Könnte Sie aktualisieren Sie Ihren code mit mehr spezifische Infos??? Diese Linie window.addEventListener( "unload", function() {} ); funktioniert nicht. Ist es vollständig?
    • Chrome-Geschichte-traversal ist etwas verwirrend. Bitte versuchen Sie pageshow Lösung.
    • Können Sie bitte aktualisieren Sie Ihren code mit pageshow Beispiel, wie aktualisieren Sie die Seite auf geht, zurück mit browser-button? Es ist nicht viel info auf dieser Seite, die Sie verlinkt haben. Danke.
    • Was meinst du genau mit aktualisieren Sie die Seite auf geht, zurück mit browser-Taste?
    • Ich sehe immer noch eine Doppel-Belastung ;( Einmal den Standard Firefox (zeigt die alte Seite aus dem browser-cache vielleicht?) und dann das script erneut ausgelöst wird. Wird das script neu laden Sie ihn auf die Bühne, der eigentliche, aber ich sehe immer noch den alten Zustand für eine Sekunde oder so ;( ich habe den code in $(document).ready( function() { /* code here */ });
    • What do you mean exactly by refresh the page on going back with browser button? Bitte, Lesen Sie meine aktuelle ursprünglichen Frage, ich habe es detailliert beschrieben in 5. Schritte.
    • Ich möchte zum aktualisieren der Inhalte auf der Seite, weil wenn ich don';t der Dinge, die ich geändert haben per ajax zuvor nicht aus irgendeinem Grund geändert, wenn ich den zurück-button. Wenn ich mit links, die es zeigt "OK".

    InformationsquelleAutor Leonid Vasilev
  2. 28

    Es ist schon eine Weile her, dass dies gepostet wurde, aber ich fand eine elegantere Lösung, wenn Sie nicht benötigen, um Unterstützung von alten Browsern.

    Können Sie einen Scheck mit 

    performance.navigation.type

    Dokumentation einschließlich browser-Unterstützung ist hier: https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation

    So, um zu sehen, wenn die Seite geladen wurde aus der Geschichte mit zurück können Sie tun

    if(performance.navigation.type == 2){
   location.reload(true);
}

    Den 2 zeigt die Seite aufgerufen wurde, die durch das navigieren in der Geschichte. Andere Möglichkeiten sind-

    0:Die Seite zugegriffen wurde, indem Sie folgenden link, einem Lesezeichen, einem Formular oder ein script, oder durch Eingabe der URL in der Adressleiste.

    1:Die Seite zugegriffen wurde, indem Sie auf den Reload-button oder über die Lage.reload () - Methode.

    255: Andere Weise

    Diese sind hier beschrieben: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation

    • Diese Prüfung für mich gearbeitet. Was hat die 2 zu bedeuten genau?
    • Ich habe Hinzugefügt, dass in ein edit.
    • Dieser funktioniert wie ein Charme .. ich stellte es auf meisten top-Bereich .. und die Seite nachladen ohne laden jedem anderen script.
    • Dies funktionierte wie ein Charme. Toll finden... Es ist sehr schnell und zuverlässig, nicht wie andere Antworten, die zu langsam waren im Vergleich zu dieser. TY
    • Dass funktioniert nur im firefox richtig?
    • diese funktionierte mit dem chrome-browser und nicht mit firefox
    • Diese ist veraltet (siehe w3c.github.io/navigation-timing/#veraltet).

    InformationsquelleAutor James
  3. 14

    Einfach jquery verwenden :

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

   //Use this inside your document ready jQuery 
   $(window).on('popstate', function() {
      location.reload(true);
   });

});

    Den oben funktioniert 100%, wenn Sie den vorwärts-oder zurück-Schaltfläche geklickt wurde, die mit ajax als gut.

    wenn es nicht klappt, muss es eine Fehlkonfiguration in einem anderen Teil des Skripts.

    Zum Beispiel könnte es nicht neu laden, wenn etwas wie eine aus dem Beispiel im vorherigen post verwendet wird window.history.pushState('', null, './');

    also, wenn Sie wollen, verwenden Sie history.pushState();
    stellen Sie sicher, dass Sie es richtig verwenden.

    Vorschlag in den meisten Fällen werden Sie brauchen nur: 

    history.pushState(url, '', url);

    Kein Fenster.Geschichte... und stellen Sie sicher, url definiert ist.

    Hoffe, das hilft..

    • Es arbeitete. Es zu schätzen wissen.
    • Dies funktioniert NICHT im IE. developer.microsoft.com/en-us/microsoft-edge/platform/issues/...
    • Seit heute funktioniert dies auch in IE11 unter Windows 10. Hinweis: ich bin nicht mit EDGE.
    • Diese funktionierte für mich das beste
    • Funktioniert nicht in Firefox für mich.
    • Ist nicht gerade ein fan von "einfach jQuery verwenden" Antworten, sorry
    • Würde ich entfernen Sie "true" von reload zu verwenden, den HTTP-cache. Es gibt keinen Punkt, der das Neuladen der Vermögenswerte, die für die meisten Fälle.

    InformationsquelleAutor Francesco
  4. 5

    Sollten Sie einen versteckten Eingang als refresh-Anzeige, mit einem Wert von "no":

    <input type="hidden" id="refresh" value="no">

    Nun mit jQuery, können Sie überprüfen Sie seinen Wert:

    $(document).ready(function(e) {
    var $input = $('#refresh');

    $input.val() == 'yes' ? location.reload(true) : $input.val('yes');
});

    Wenn Sie klicken Sie auf die Schaltfläche zurück klicken, werden die Werte in hidden-fields behalten den gleichen Wert, wie wenn Sie ursprünglich Links der Seite.

    Also das erste mal, laden Sie die Seite, die input-Wert wäre "Nein". Wenn Sie zu der Seite zurückkehren, werden Sie "ja" und Ihr JavaScript-code wird eine Regenerierung auslösen.

    • Es funktioniert nicht. Ich havetried Firefox und Chrome und es funktioniert nicht.
    • Es funktioniert nur mit HTML-5
    • Bitte überprüfen Sie meine aktualisierte Frage, vielleicht haben Sie und andere mich falsch verstanden. Es ist viel mehr die Sache jetzt klarer, was ich erreichen will. Danke.
    • Ja, das habe ich missverstanden, Danke für die Aktualisierung Frage im detail.
    • Bitte finden Sie in den aktualisierten Antworten
    • jetzt funktioniert es. Aber es ist nachladen 2 mal und es sieht ein wenig seltsam. Erstmals lädt es. nichts - das ist die defaut browser Verhalten wahrscheinlich. Das zweite mal lädt es - über Ihr Skript werden die Werte aktualisiert, wie es sein sollte, aber es sieht schlecht aus , da lädt es zwei mal. Keine Ahnung, wie es zu verbessern ein wenig, so das nachladen sieht besser aus oder lädt nur einmal? Es sieht besser aus in Chrome als Firefox, das nachladen geht schneller, aber ich sehe immer noch den ursprünglichen Zustand zurück (für eine Sekunde oder halbe Sekunde) und das Skript neu laden ist nur, dass nach.
    • Jede neue Idee, wie man den "Doppel-Last"?
    • Auf der Suche nach es. Ich bin auch versucht zu kommen mit einer Lösung. Ich werde schreiben Sie einen Kommentar, wenn ich etwas bekommen

    InformationsquelleAutor Dhiraj
  5. 2

    Seit performance.navigation ist jetzt veraltet, können Sie versuchen, diese:

    var perfEntries = performance.getEntriesByType("navigation");

if (perfEntries[0].type === "back_forward") {
    location.reload(true);
}
    InformationsquelleAutor LuTHieR
  6. 0

    Laden ist einfach. Sie sollten:

    location.reload(true);

    Und Aufdeckung zurück ist : 

    window.history.pushState('', null, './');
  $(window).on('popstate', function() {
   location.reload(true);
});
    • Funktioniert nicht ;( ich habe versucht alert('test'); statt location.reload(true); aber immer noch nichts. Ich habe versucht firefox und chrome aber nichts. Ich habe versucht, innen-Dokument bereit, außerhalb , aber nichts funktioniert. wenn ich versuche ein einfaches alert() oder beliebigen jquery-code tht funktioniert. Ich habe eine Menge von jquery-code auf meiner Seite und es funktioniert.
    • Ich habe bearbeitet beantworten, versuchen, neue Lösung. Sache ist, müssen Sie drücken Sie Zustand vor, oder Sie bekommen nicht popstate-event.
    • Sie haben wahrscheinlich missverstanden whan ich will. Ich aktualisiert meine Frage mit einer detaillierten Beschreibung. Bitte, überprüfen Sie es wieder, wenn Sie Zeit haben, danke.
    InformationsquelleAutor Anton Stepanenkov
  7. 0

    Fand ich die beste Antwort und es funktioniert perfekt für mich

    nutzen Sie einfach dieses einfache script in deinem link 

    <A HREF="javascript:history.go(0)">next page</A>

    oder die Schaltfläche click-Ereignis

    <INPUT TYPE="button" onClick="history.go(0)" VALUE="next page">

    wenn Sie dieses aktualisieren Sie Ihre Seite und gehen Sie dann zur nächsten Seite
    wenn Sie zurück kehren, es wird mit der letzten Aktualisierung Staat.

    Ich habe es in einer CAS-login und gibt mir, was ich will.
    Hoffe es hilft .......

    details aus hier

    • Dies ist nicht für mich arbeiten. Was bedeutet die "0" dar?
    InformationsquelleAutor muhammed aslam
  8. -10

    Der beste Weg ist, um timeout mithilfe von jquery.

    function explode(){
  alert("YOUR RELOAD PAGE HERE!");
}
setTimeout(explode, 1);

    In einer Millisekunde wird die Funktion auslösen, einmal, damit Ihre Benutzer vielleicht nicht einmal bemerken, auslösen.

    Ich verwende es kein problem.

    InformationsquelleAutor Ikong
Schreibe einen Kommentar