2012-10-11 12 views
5

Ho una semplice pagina web, vale a dire:Come attivare Firefox per attivare l'evento popstate quando si torna da una pagina su un dominio diverso?

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>History hacks</title> 
<script> 
window.onpopstate = function (e) { 
    alert("location: " + document.location + ", state: " + JSON.stringify(e.state)); 
} 
window.onload = function (e) { 
    alert('page loaded'); 
} 
</script> 
</head> 
<body> 
<p> <a href="http://www.yahoo.com">Yahoo</a> <a href="#part1">Part 1</a></p> 
</body> 
</html> 

Ora ci sono un certo numero di differenze per quanto riguarda come Chrome e Firefox attivano l'evento popstate (mi vengono i brividi a pensare cosa sto contro quando mi giro a test IE), ma uno che mi dà problemi qui è che Chrome attiverà un evento popstate ogni volta che clicco su uno di questi due link, e poi di nuovo quando premo il pulsante Indietro. Firefox attiverà l'evento per il collegamento che modifica la parte hash (solo la prima volta se il collegamento hash è lo stesso) e non lo attiverà affatto se faccio clic sul collegamento Yahoo e poi sul pulsante Indietro.

Quindi c'è un modo che posso dire in Firefox che un utente ha appena fatto clic indietro e atterrato sulla mia pagina da un sito completamente diverso su un dominio diverso? C'è un altro evento che potrebbe funzionare per questo scopo in Firefox? (L'evento load non viene attivato neanche quando torno da yahoo.com.)

risposta

1

Stai presumibilmente cercando l'evento pageshow se desideri ricevere una notifica quando viene visualizzata la pagina quando torni indietro anche se è stata ricevuta memorizzato nella cache della pagina.

Si noti che se non vi è alcun evento di carico che significa anche che la pagina ha ancora esattamente lo stesso ambiente di esecuzione di script e DOM che ha fatto quando è stata spostata da. Fondamentalmente è come se l'utente avesse cambiato scheda per un po ', invece di navigare.

Quindi, dato che, vuoi ancora ottenere un evento in quella situazione? Ricevi eventi che cerchi quando l'utente torna alla scheda con la tua pagina?

9

Per ottenere un evento popstate quando il pulsante indietro (o avanti) è usato per andare al caricamento della pagina iniziale, utilizzare replaceState() come

window.onload = function(e) { 
    history.replaceState(null, null, document.URL); 
} 

Per ignorare l'iniziale popstate che Chrome genera quando la pagina viene caricata puoi taggare lo stato ogni volta che chiami pushState/replaceState, ad es.

history.pushState({myTag: true}, null, url); 

Allora il vostro gestore popstate appena filtra per myTag

window.onpopstate = function(e) { 
    if (!e.state.myTag) return; // none of my business 
    // code to handle popstate 
} 

È possibile combinare questi due per una soluzione banale cross-browser:

window.onpopstate = function(e) { 
    if (!e.state.myTag) return; // none of my business 
    // code to handle popstate 
} 

window.onload = function(e) { 
    history.replaceState({myTag: true}, null, document.URL); 
} 

@Boris Zbarsky ha dettagliato il bfcache. Non ho pensato a come combinarlo con il mio approccio. Ho appena disabilitarlo adding a page unload handler

window.onunload = function(e) { } 
+0

Questa è una grande risposta per spiegare come fare l'API storia del lavoro la stessa piattaforma croce, ma in realtà non risponde OP di domanda: ** come sapere se l'utente ha effettivamente fatto clic su "indietro" per finire nella pagina. ** Utilizzando il tuo esempio, puoi dire che l'utente ha fatto clic su Chrome e Safari perché mytag non sarà null nel gestore onpopstate . Tuttavia, in firefox, onpopstate non viene chiamato così non sembra esserci alcun modo per determinare se l'utente sta tornando alla pagina o se si tratta di una prima visita. Quindi c'è davvero un modo per distinguerlo in Firefox? – Karmacon

+1

@Karma: se disabiliti il ​​bfcache (vedi l'ultima parte della mia risposta), Firefox dovrebbe comportarsi in modo simile a Chrome. Leggete la risposta di Boris Zbarsky per una buona illustrazione del perché dovreste preferire la cache della pagina di Firefox al comportamento di Chrome. –

+0

Grazie @Sean Hogan. Dopo una rilettura su Firefox bfCaching, mi sono reso conto che non funziona sul mio sito perché usiamo https. Firefox aggiorna sempre la pagina. Immagino che non ci sia nulla che io possa fare al riguardo. – Karmacon

0

prima di scarico ricarico la mia pagina (per ottenere lo stato iniziale) quindi impostare nuovi href

window.onunload = function(e) { 
 
    location.reload(); 
 
    location.href = **new_url** ; 
 
}

devo farlo perché firefox salva l'ultimo stato della mia pagina e lo ripristina invece di ricrearlo.

0

Ho avuto la stessa domanda e ho dovuto scavare nelle specifiche per capire perché l'evento popstate non si attiva in nessun browser quando si utilizza il pulsante Indietro per tornare da una pagina su un dominio diverso. Si scopre che in questo caso il popstate non dovrebbe sparire perché lo stato del documento modificato non è vero e il popstate deve essere attivato solo se lo stato modificato è vero. Per lo stato modificato da impostare su true spec dice:

Se lo stato modificato è true se il documento della voce specificata ha una voce più recente e quella voce non è la voce specificata; altrimenti lascia che sia falso.

La mia comprensione è che quando torniamo alla nostra pagina da una pagina in un dominio diverso, la nostra pagina non ha l'ultima voce da quando il documento è cambiato e il nuovo documento non ha ancora l'ultima voce. Ancora dalle specifiche:

Ogni documento in un contesto di esplorazione può anche avere una voce più recente. Questa è la voce per il documento in cui la cronologia delle sessioni del contesto di esplorazione è stata di recente spostata. Quando viene creato un documento, inizialmente non ha alcuna voce più recente.

Tuttavia c'è ancora un modo per vedere se l'utente è tornato alla tua pagina impostando un flag in history.state nella tua pagina utilizzando pushState o replaceState metodi della storia e controllo per l'esistenza di questo flag in history.state a caricamento pagina.

Per ulteriori lettura in HTML di WHATWG spec la parte relativa alla manifestazione popstate: https://html.spec.whatwg.org/multipage/browsers.html#history-traversal