C'è un modo per cambiare la barra degli indirizzi del browser senza aggiornare la pagina?

91

Sto sviluppando un'app web. In esso ho una sezione chiamata categorie che ogni volta che un utente fa clic su una delle categorie, un pannello di aggiornamento carica il contenuto appropriato.

Dopo che l'utente ha fatto clic sulla categoria da cui desidero modificare l'URL della barra degli indirizzi del browser

www.mysite.com/products

a qualcosa di simile

www.mysite.com/products/{selectedCat}

senza aggiornare la pagina.
Esiste un qualche tipo di API JavaScript che posso utilizzare per ottenere questo risultato?

url address-bar

— Luiso
fonte

157

Con HTML5 puoi modificare l'URL senza ricaricare:

Se vuoi creare un nuovo post nella cronologia del browser (cioè il pulsante Indietro funzionerà)

window.history.pushState('Object', 'Title', '/new-url');

Se vuoi solo cambiare l'URL senza poter tornare indietro

window.history.replaceState('Object', 'Title', '/another-new-url');

L'oggetto può essere utilizzato per la navigazione ajax:

window.history.pushState({ id: 35 }, 'Viewing item #35', '/item/35');

window.onpopstate = function (e) {
  var id = e.state.id;
  load_item(id);
};

Maggiori informazioni qui: http://www.w3.org/TR/html5-author/history.html

Una soluzione di fallback: https://github.com/browserstate/history.js

— Alfred
fonte

4

+1 Nota anche; questi cambiano il pathe / o query stringnell'URL; non possono modificare il protocollo, il dominio o la porta (poiché sarebbe un problema di sicurezza come altri hanno sottolineato). La hashfunzione sopra può cambiare l'ancora (o l'id del frammento)

— Chris S

2

solo dicendo, nel tuo esempio "/ item / 35"}, è stato aggiunto un} extra

— Zhanger

Come domanda secondaria, esiste un modo per consentire a questi URL di essere indicizzati in Google?

— Peter Featherstone

1

Una libreria migliore sembra essere github.com/browserstate/history.js , viene mantenuta attivamente e ampiamente utilizzata mentre fortes-history.js è rimasta inattiva per 3 anni.

— Gonfi den Tschal

2

Tieni presente che Firefox non supporta il titolo, quindi utilizza document.title = "nuovo titolo".

— 0fnt

31

Per aggiungere a ciò che i ragazzi hanno già detto, modifica la proprietà window.location.hash in modo che corrisponda all'URL che desideri nella tua funzione onclick.

window.location.hash = 'category-name'; // address bar would become http://example.com/#category-name

— roborourke
fonte

c'è un modo per cambiare l'URL senza il simbolo "#" nell'URL?

— SHEKHAR SHETE

7

Credo che manipolare direttamente la barra degli indirizzi su un URL completamente diverso senza passare a quell'URL non sia consentito per motivi di sicurezza, se sei soddisfatto

www.miosito.com/prodotti/#{selectedCat}

vale a dire un collegamento in stile di ancoraggio all'interno della stessa pagina, quindi esaminare i vari script di cronologia / "pulsante indietro" che sono ora presenti nella maggior parte delle librerie javascript.

La menzione del pannello di aggiornamento mi porta a indovinare che stai usando asp.net, in tal caso il controllo della cronologia ajax di asp.net è un buon punto di partenza

— Justin Wignall
fonte

3

Non credo che ciò sia possibile (almeno passare a un indirizzo completamente diverso), poiché sarebbe un uso improprio non intuitivo della barra degli indirizzi e potrebbe promuovere attacchi di phishing.

— Galvegese
fonte

Piuttosto che essere poco intuitivo, penso che non dovresti essere in grado di farlo perché potrebbe essere utilizzato in modo improprio per attacchi di phishing. Comunque, è +1.

— OregonGhost

Sì, mi è appena venuto in mente. Non è una buona idea. Grazie OregonGhost.

— Galwegian

1

Io non credo che la sua possibile ... Partenza Wikimapia ... Mentre si trascina la mappa intorno, l'URL viene cambiato ...

— Shivasubramanian A

@ Shivasubramanian-a: ho guardato Wikimapia, e in effetti, usano solo la tecnica suggerita da somej e descritta da sanchothefat: cambia semplicemente il nome dell'ancora. Che è sicuro contro il phishing ...

— PhiLho

-1

Questo non può essere fatto nel modo in cui lo dici. Il metodo suggerito da somej.net è il più vicino che puoi ottenere. In realtà è una pratica molto comune nell'era AJAX. Anche Gmail lo usa.

— aalaap
fonte

-1

"window.location.hash"

come suggerito da sanchothefat dovrebbe essere l'unico modo per farlo. Perché in tutti i posti in cui ho visto questa funzione, è sempre dopo l'URL # in.