jQuery transizione pagina e cronologia browser

Sto lavorando con jQuery per avere un effetto dissolvenza sulla mia pagina html, che funziona bene. Tuttavia, quando premo il pulsante Indietro nel mio browser, vado all'URL destro ma ottengo una pagina vuota. È una cosa da browser-caching? Sono relativamente nuovo a jQuery e non sono sicuro di come risolverlo. Questo è il sito: http://www.e-preview.be/huyzewaterloos/nl/index.html jQuery transizione pagina e cronologia browser

Il codice che sto usando è questo:

//page transition 
    $("body").css("display", "none"); 
    $("body").fadeIn(1500); 
    $("a.transition").click(function(event){ 
    event.preventDefault(); 
    linkLocation = this.href; 
    $("body").fadeOut(500, redirectPage); 
    }); 

function redirectPage() { 
    window.location = linkLocation; 
}

fonte

2010-09-02 Rembrand

È perché la pagina è in "bfcache" (vedere a Firefox article). Per bfcache disable, si può semplicemente aggiungere un attribut onunload:

<body onunload="">

Fonte: Ajax, back button and DOM updates e Is there a cross-browser onload event when clicking the back button?

fonte

2010-09-12 16:19:39

Sì! Questo è successo, grazie! – Rembrand

Nella funzione di cui sopra, la variabile linkLocation non è più disponibile perché è fuori portata.

Prova a modificare:

$("body").css("display", "none"); 
$("body").fadeIn(1500); 
$("a.transition").click(function(event){ 
    event.preventDefault(); 
    linkLocation = this.href; 
    $("body").fadeOut(500, function() { 
     window.location = linkLocation; 
    }); 
});

Edit: Allora ho fissato il codice, ma che non era il problema. :)

Apparentemente, jQuery (document) .ready() non viene attivato quando si preme il pulsante Indietro. Puoi provare questo vicino alla parte superiore della pagina.

history.navigationMode = 'compatible';

Fonte: Is there a cross-browser onload event when clicking the back button?

fonte

2010-09-02 15:21:27 Sandro

quindi è relativa al browserhistory/caching. Ci proverò quando tornerò al lavoro lunedì. Grazie! – Rembrand

Provato con il codice modificato ma Firefox 3.5 non lo sta facendo. Oh bene, se è solo in quello, posso conviverci per ora. Grazie comunque, lo esamineremo ancora. – Rembrand

Ciao, sembra che il commento sopra quello di prima potrebbe essere migliore. http://stackoverflow.com/questions/158319/cross-browser-onload-event-and-the-back-button/201406#201406 – Sandro

più recente browser sono migliori su come mantenere le pagine precedenti pronte per visualizzare quando si utilizza i pulsanti Avanti e Indietro. Quindi, ciò che probabilmente sta accadendo è che il tuo browser sta semplicemente rivisitando la pagina dopo che l'$("body").fadeOut(500, redirectPage); ha terminato l'esecuzione. Cioè, la pagina che viene visualizzata dopo aver fatto clic sul pulsante Indietro ha applicato lo stile body { display: none; }.

Non ho avuto problemi a navigare la pagina con Chrome "6.0.472.51 beta" utilizzando i pulsanti Indietro e Avanti. Quando ho usato Firefox 3.5 ho visto il problema descritto quando si utilizza il pulsante Indietro per tornare alla pagina indice. Usando Firebug, sono stato in grado di confermare che lo stile dell'elemento del corpo era impostato su display: none.

Quindi quello che stai vedendo è Firefox bfcache mantenendo la pagina nello stato precedente, JavaScript e tutto. Se desideri che Firefox rileggi il tuo codice di dissolvenza, puoi collegarlo all'evento pageshow di Firefox. Allo stesso modo, WebKit ha il suo meccanismo page caching (che influenzerebbe Safari e Chrome).

Si deve anche notare che la funzione di jQuery .ready() è non la stessa cosa che la funzione window.load(). Vedere lo documentation per ulteriori dettagli. Il source code per la funzione .ready() è anche molto utile.

Per riepilogare: Il codice eseguito da $.ready() viene eseguito prima dello la pagina viene effettivamente visualizzata. Nei browser più recenti, quando si esce da una pagina è molto probabile che il browser salvi lo stato di quella pagina esattamente come è quando lo si lascia. Pertanto, quando si utilizza il pulsante Indietro del browser per tornare alla pagina, la pagina non verrà nuovamente visualizzata. Questo è il DOM non verrà ricostruito e la funzione $.ready() non verrà riattivata. Se si dispone di codice che deve essere eseguito ogni volta che la pagina è visualizzata, allegare il codice al metodo pageshow() (se esiste).

fonte

2010-09-02 15:22:01

non è così, perché la funzione di caricamento del corpo dovrebbe ancora essere eseguita, e così dovrebbero essere gli script js – Nealv

Dipende dal browser. Chiaramente, Chrome 6 sta rieseguendo l'evento onload del corpo. Ma FireFox 3.5 non lo è. http://www.thomasfrank.se/when_onload_fails.html –

Cribbio, non sapevo nemmeno che ci fosse una differenza tra browser quando si trattava di sparare a jQuery. Buono a sapersi, grazie. – Rembrand

Normalmente le pagine vengono memorizzate nella cache quando si preme il pulsante Indietro, la funzione $ (documento) .ready() non viene attivata.

Provare a impostare no-cache per la pagina.

fonte

2010-09-02 15:32:35

Ah, quindi questo si riferisce alla solluizione di Sandro. Grazie – Rembrand

Hm, ho provato con $ .ajaxSetup {cache: false}); ma non sembra che faccia molto in Firefox. – Rembrand

Devo risolvere per Firefox, grazie a Gobygoba per il codice :) – Rembrand

jQuery transizione pagina e cronologia browser

risposta

Problemi correlati