Aggiornamento della barra degli indirizzi con nuovo URL senza hash o ricarica della pagina

646

O ho sognato Chrome (canale di sviluppo) implementando un modo per aggiornare la barra degli indirizzi tramite javascript (il percorso, non il dominio) senza ricaricare la pagina o l'hanno davvero fatto.

Tuttavia, non riesco a trovare l'articolo che penso di aver letto.

Sono pazzo o c'è un modo per farlo (in Chrome)?

ps non sto parlando di window.location.hash, et al. Se quanto sopra esiste, la risposta a questa domanda non sarà vera.

javascript ajax google-chrome

— David Murdoch
fonte

3

Possibile duplicato di Modifica l'URL senza ricaricare la pagina

— Tobias Kienzler

1

@tobiaskienzler Quando questa domanda è stata originariamente posta nel 2009, non era possibile.

— David Murdoch,

3

Ovviamente no. Ma ora lo è, le domande richiedono lo stesso. Un peccato però che l'altro abbia accettato una risposta obsoleta (da te, ho notato) ... Sai una cosa? Viceversa viceversa, nessuno ha detto che "l'originale" deve essere il più vecchio, in realtà ci sono precedenti

— Tobias Kienzler,

@tobiaskienzler, l'altra domanda non ha una risposta accettata obsoleta.

— David Murdoch,

2

@TobiasKienzler è una domanda di 6 anni, perché devi preoccuparti di questa domanda? Goditi la straordinaria risposta e implementala nella tua applicazione. Per 6 anni migliaia di utenti SO hanno concordato che si tratta di domande fantastiche, per favore lasciatelo così com'è.

— Imam Assidiqqi,

876

Ora puoi farlo nella maggior parte dei browser "moderni"!

Ecco l'articolo originale che ho letto (pubblicato il 10 luglio 2010): HTML5: modifica dell'URL del browser senza aggiornare la pagina .

Per uno sguardo più approfondito su pushState / replaceState / popstate (alias l'API History HTML5) consultare i documenti MDN .

TL; DR, puoi farlo:

window.history.pushState("object or string", "Title", "/new-url");

Vedi la mia risposta a Modifica l'URL senza ricaricare la pagina per una guida di base.

— David Murdoch
fonte

3

Ah, la funzionalità è in WebKit ed è arrivata qualche mese fa < bugs.webkit.org/show_bug.cgi?id=36152 >. Bella scoperta!

— vecchietto vivente

6

questo è ora usato da github, mentre la navigazione degli alberi

— Valerij

1

@Vprimachenko: Sì. E ogni tanto mi rompono il bottone di ritorno.

— David Murdoch,

Questo ora può essere fatto in Chrome, Safari, FF4 + e IE10pp3 +! (Dalla risposta di David Murdoch per stackoverflow.com/questions/824349/... )

— Zach Lysobey

11

Protip: è possibile utilizzare i percorsi relativi con queste funzioni, nonché (per esempio ../new-urlo ../../new-urlSembrano fare quello che ci si aspetterebbe in Chrome, almeno..

— Mahn

157

Cambiando solo ciò che è dopo l'hash - vecchi browser

document.location.hash = 'lookAtMeNow';

Modifica dell'URL completo. Chrome, Firefox, IE10 +

history.pushState('data to be passed', 'Title of the page', '/test');

Quanto sopra aggiungerà una nuova voce alla cronologia in modo da poter premere il pulsante Indietro per passare allo stato precedente. Per modificare l'URL in atto senza aggiungere una nuova voce alla cronologia, utilizzare

history.replaceState('data to be passed', 'Title of the page', '/test');

Prova a eseguirli ora nella console!

— Pawel
fonte

13

replaceStateera esattamente quello di cui avevo bisogno, grazie per l'espansione della risposta originale.

— Choylton B. Higginbottom,

"il dominio e il protocollo devono essere gli stessi dell'originale!" questo impedisce ad alcuni siti di pesca di modificare l'URL della barra degli indirizzi.

— Rick,

3

Non si deve passare un URL assoluto a questa funzione. Se lo fai, molto probabilmente dovrai crearlo dinamicamente dallo schema, dall'host e dalla porta correnti, il che è molto lavoro quando potresti semplicemente renderlo un URL relativo ("foo.html" o persino "/foo.html ") e lascia che sia il browser a occuparsene.

— DimeCadmium,

1

@DimeCadmium simpatica semplificazione. Aggiornato.

— Pawel,

history.replaceStateaggiungi alla storia in ff 66.0b1

— azzamsa

33

Aggiorna alla risposta Davids per rilevare anche i browser che non supportano il pushstate:

if (history.pushState) {
  window.history.pushState("object or string", "Title", "/new-url");
} else {
  document.location.href = "/new-url";
}

— metamagikum
fonte

9

document.location.href ricarica la pagina

— paullb

1

var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?foo=bar';
window.history.pushState({path:newurl},'',newurl);

— Kevin Mendez
fonte

4

Mentre questo frammento di codice può risolvere la domanda, inclusa una spiegazione aiuta davvero a migliorare la qualità del tuo post. Ricorda che stai rispondendo alla domanda per i lettori in futuro e che queste persone potrebbero non conoscere i motivi del tuo suggerimento sul codice.

— MaxiMouse

@MaxiMouse grazie per la tua pazienza, lo terrò presente.

— Kevin Mendez,