window.history.pushState aggiornamento del browser

Question

Sto lavorando su qualche codice javascript e utilizzo di window.History.pushState per caricare nuove pagine HTML, anziché utilizzare i tag href. Il mio codice (che è funzionante bene) si presenta così.

window.History.pushState({urlPath:'/page1'},"",'/page1') 

stranamente, questo fallisce, cioè ricarica la navigatore

window.History.pushState({urlPath:'/page2.php'},"",'/page2.php') 

Ma questo funziona, il contenuto viene aggiornato, il browser non viene aggiornata! (Si noti l'URL è assoluta e non relativa)

window.History.pushState({urlPath:'www.domain.com/page2.php'},"",'www.domain.com/page2.php') 

Il documentation per window.History.pushState dice che il terzo parametro URL può essere assoluto o relativo -

URL - URL del nuovo entry storia è data da questo parametro. Nota: che il browser non tenterà di caricare questo URL dopo una chiamata a pushState(), ma potrebbe tentare di caricare l'URL in un secondo momento, ad esempio dopo che l'utente riavvia il browser. Il nuovo URL non deve essere assoluto; se è relativo, è risolto relativamente all'URL corrente. Il nuovo URL deve essere della stessa origine dell'URL corrente; altrimenti, pushState() genererà un'eccezione. Questo parametro è facoltativo; se non è specificato, è impostato sull'URL corrente del documento.

Gli URL assoluti sembrano funzionare ma i parenti sembrano non esserlo. Perché sta succedendo?

Answer 1

La risposta breve è che history.pushState (non History.pushState, che sarebbe un'eccezione, la parte window è opzionale) non potrà mai fare ciò che lei suggerisce.

Se le pagine si aggiornano, sono causate da altre operazioni (ad esempio, è possibile che il codice venga eseguito in una nuova posizione nel caso in cui la barra degli indirizzi cambi).

history.pushState({urlPath:'/page2.php'},"",'/page2.php') funziona esattamente come previsto nelle ultime versioni di Chrome, IE e Firefox per me e i miei colleghi.

In effetti è possibile inserire qualsiasi funzione nella funzione: history.pushState({}, '', 'So long and thanks for all the fish.not a real file').

Se pubblichi un po 'di codice (con particolare attenzione per il codice vicino alla history.pushState e ovunque document.location viene usato), allora saremo più che felici di aiutare a capire dove esattamente questo problema proviene.

Se pubblichi più codice, aggiornerò questa risposta (ho la tua domanda preferita) :).

Answer 2

window.history.pushState({urlPath:'/page1'},"",'/page1') 

Funziona solo dopo pagina viene caricata, e quando si clicca su Aggiorna ciò non significa che non v'è alcuna reale URL.

Quello che dovresti fare qui è sapere a quale URL ti stai reindirizzando quando ricarichi questa pagina. E su quella pagina è possibile ottenere le condizioni ottenendo l'URL corrente e rendendo tutte le vostre condizioni.

Answer 3

Come altri hanno suggerito, non stai chiaramente spiegando il tuo problema, cosa stai cercando di fare, o quali sono le tue aspettative su cosa questa funzione dovrebbe effettivamente fare.

Se ho capito correttamente, ci si aspetta che questa funzione aggiorni la pagina (si usa effettivamente il termine "ricarica il browser").

Ma questa funzione non è intesa per ricaricare il browser.

Tutte le funzioni fa, è di aggiungere (push) un nuovo "stato" sulla cronologia del browser, in modo che in futuro, l'utente sarà in grado di tornare a questo stato che la pagina web è ora in.

Normalmente, questo viene utilizzato in combinazione con le chiamate AJAX (che aggiornano solo una parte della pagina).

Ad esempio, se un utente esegue una ricerca "CATS" in una delle caselle di ricerca, e i risultati della ricerca (immagini presumibilmente carine di gatti) vengono caricati indietro tramite AJAX, nella parte inferiore destra della pagina - allora lo stato della pagina non verrà modificato. In altre parole, nel prossimo futuro, quando l'utente decide che vuole tornare alla sua ricerca di "CATS", non sarà in grado di farlo, perché lo stato non esiste nella sua storia. Sarà solo in grado di fare di nuovo clic sulla casella di ricerca vuota.

Da qui la necessità per la funzione

history.pushState({},"Results for `Cats`",'url.html?s=cats'); 

Esso è inteso come un modo per consentire al programmatore di definire precisamente la sua ricerca nel percorso della storia dell'utente. Questo è tutto ciò che è destinato a fare.

Quando la funzione funziona correttamente, l'unica cosa che dovresti aspettarti di vedere è che l'indirizzo nella barra dell'indirizzo del tuo browser cambia in qualunque cosa tu specifichi nel tuo URL.

Se già lo capisci, scusa per questo lungo preambolo. Ma sembra dal modo in cui poni la domanda, che non hai.

Per inciso, ho anche riscontrato alcune contraddizioni tra il modo in cui la funzione è descritta nella documentazione e il modo in cui funziona nella realtà. Trovo che non sia una buona idea usare valori vuoti o vuoti come parametri.

Vedere la risposta a this SO question. Quindi ti consiglio di inserire una descrizione nel tuo secondo parametro. Dalla memoria, questa è la descrizione che l'utente vede nel menu a discesa, quando fa clic e tiene il mouse sul pulsante "indietro".