Posso impedire a history.popstate di attivarsi al caricamento iniziale della pagina?

Question

Sto lavorando a un sito che serve contenuti tramite AJAX.

Se si fa clic su una voce nel menu, un div di contenuto viene aggiornato con la risposta $.get, niente di particolare.

Sto implementando history.pushState per consentire la navigazione con il pulsante Indietro/Avanti del browser.

ho il seguente per caricare contenuti su navigazione storia:

$(function() { 
    $(window).bind("popstate", function() { 
     $.getScript(location.href); 
    }); 
}); 

Il problema è che quando una pagina viene caricata per la prima volta, questa funzione non $.getScript in modo che la pagina viene caricata subito di nuovo. La prima volta che viene caricata la pagina viene visualizzata la vista HTML iniziale, quindi nel secondo caricamento viene visualizzata la vista JS, poiché è una richiesta JS.

Come posso evitare che questo evento venga attivato nelle pagine con richieste HTML?

Answer 1

Utilizzando l'API native HTML5 Storia si sta andando a correre in alcuni problemi, tutti i browser HTML5 gestisce l'API un po 'diverso in modo da non si può semplicemente il codice una volta e si aspettano di lavorare senza soluzioni di attuazione . History.js fornisce un'API cross-browser per l'API della cronologia HTML5 e una riserva facoltativa hashchange per i browser HTML4 se si desidera percorrere tale percorso.

Per aggiornare il proprio sito web in un RIA/Ajax-Application è possibile utilizzare questo frammento di codice: https://github.com/browserstate/ajaxify

che fa parte di questo articolo più Intelligent State Handling che va in spiegazioni circa hashbang, hash e l'API di storia HTML5.

Fammi sapere se hai bisogno di ulteriore aiuto :) Saluti.

Answer 2

All'avvio del browser, viene sempre generato un evento popstate. Quindi è necessario determinare se questo popstate è tuo o no.

Quando si esegue il pushState, assicurarsi di disporre di un oggetto di stato. In questo modo puoi controllarlo più tardi.

Poi, il gestore popstate, controllare l'oggetto Stato :)

$(function() { 
    $(window).bind("popstate", function(data) { 
     if (data.state.isMine) 
      $.getScript(location.href); 
    }); 
}); 

// then add the state object 
history.pushState({isMine:true},title,url); 

Fatemi sapere se avete bisogno di più aiuto :)

Answer 3

Quando l'evento popstate è sparato al caricamento della pagina non lo farà avere una proprietà di stato nell'oggetto evento. Questo ti permette di controllare se l'evento è stato attivato per un caricamento della pagina o meno.

window.onpopstate = function (event) { 
    if (event.state) { 
    // do your thing 
    } else { 
    // triggered by a page load 
    } 
} 

Answer 4

è necessario per ottenere l'event.originalEvent

// Somewhere in your previous code 
if (history && history.pushState) { 
    history.pushState({module:"leave"}, document.title, this.href); 
} 


$(window).bind("popstate", function(evt) { 
    var state = evt.originalEvent.state; 
    if (state && state.module === "leave") { 
    $.getScript(location.href); 
    } 
}); 

Answer 5

Io lo uso per cambiare Bar Indirizzo e salvare stato attuale, compreso il corpo HTML corrente, e ricarico sulla schiena Bouton clic, senza alcuna altra chiamata AJAX.Tutto viene salvato nel tuo browser:

1. $(document).ajaxComplete(function(ev, jqXHR, settings) { 
   
       var stateObj = { url: settings.url, innerhtml: document.body.innerHTML }; 
       window.history.pushState(stateObj, settings.url, settings.url); 
   }); 
   
   
   window.onpopstate = function (event) { 
       var currentState = history.state; 
       document.body.innerHTML = currentState.innerhtml; 
   };