HTML5 onpopstate sul caricamento della pagina

Question

Sto utilizzando il nuovo evento onpopstate HTML5. Utilizzando Firefox 4 l'evento window.onpopstate viene attivato su un caricamento della pagina mentre in Webkit questo non sembra essere il caso.

Qual è il comportamento corretto?

Answer 1

L'evento popstate viene generato in alcuni casi durante la navigazione verso una voce della cronologia di sessione.

http://www.whatwg.org/specs/web-apps/current-work/#event-popstate

Dalla mia comprensione, anche se potrei sbagliarmi, visto che il caricamento della pagina vuol dire la storia viene creato e attraversato a, sì, dovrebbe essere licenziato al caricamento della pagina.

Si veda anche,

http://www.mail-archive.com/whatwg@lists.whatwg.org/msg19722.html

e,

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Answer 2

Firing onpopstate al caricamento della pagina è corretto, e WebKit avrà questo comportamento presto. WebKit 534.7 (Chrome 7.0517.44) ora si comporta in questo modo.

Ho archiviato un bug di Chrome, ma risulta che questo è il comportamento desiderato; è necessario per gestire correttamente determinate azioni del pulsante Indietro/Avanti. Vedi this bug report at code.google.com per ulteriori discussioni e collegamenti.

Sto ancora provando a creare un buon modello di codice per un gestore di eventi onpopstate.

Answer 3

Non so se è questo quello che chiedete, ma la mia soluzione per una sola volta ajax- gestore di eventi onpopstate è quello di impostare fino a true una variabile refreshed su window.onload e impostarlo su falsehistory.pushState chiamate; quindi sul gestore onpopstate è sufficiente fare qualcosa se refreshed è false.

Sembra sciocco, e lo è, ma non ho potuto fare di meglio.

Answer 4

I browser tendono a gestire l'evento popstate in modo diverso al caricamento della pagina. Chrome e Safari emettono sempre un evento popstate al caricamento della pagina, ma Firefox non lo fa.

Questa citazione è stata presa dalla documentazione di Mozilla: https://developer.mozilla.org/en-US/docs/DOM/window.onpopstate

tendo a concordare con il sistema di Mozilla. Il caricamento della pagina non è un'azione che richiede l'attivazione di un evento popstate aggiuntivo, poiché lo stato non viene visualizzato, viene caricato per la prima volta.

Suppongo che Webkit lo stia facendo per comodità ... in tutte le mie implementazioni, è sempre un inconveniente ritardare il caricamento del mio gestore fino a quando il popstate iniziale non ha sparato.

Invece di questo (utilizzando pseudo funzioni):

AddEventHandler(window, 'popstate', OnPopState); 

devo fare qualcosa di simile:

AddLoadEvent(window.setTimeout(function() 
    { 
     AddEventHandler(window, 'popstate', OnPopState); 
    },0)); 

Answer 5

appena risolto il problema, e la correzione è in realtà abbastanza semplice. Firefox non attiva onpopstate al caricamento iniziale della pagina. Dopo aver attivato un popstate, restituisci false o previeni il valore predefinito nell'azione page.load e sei d'oro.

Cheers.

In azione qui: www.thecoffeeshopnyc.com

// Write in a new handler for Firefox, which does not fire popstate on load. 
// Modern Webkit browsers fire popstate on load. The event handler below fires the controller 
$(window).load(function() { 
    if ($.browser.mozilla) { 
     // Your func. 
    } 
}) 

// Add the event listener. If the above is false, it will still run as intended in normal browsers. 
window.onpopstate = function() { 
    // Your func. 
} 

Answer 6

Nel caso in cui qualcuno è interessato, ho si avvicinò con un modello decente per lavorare con onpopstate (questo codice presuppone jQuery, controllo presenza caratteristica sono spogliati per chiarezza:

$(function() { 

    // 1. Add initial state to current history record on page load. 
    var href = location.href; 
    history.replaceState({"href": href}, null, href); 

    // 2. Now attach the popstate handler. 
    window.onpopstate = function(ev) { 

    // Raised on page load this event will still contain no state. 
    var state = ev.state; 
    if (state && state.href) { 

     // 3. Add your logic, use `state` and `state.href` as you see fit.   

    } 
    }; 

});