jquery: cambia l’indirizzo URL senza reindirizzamento?

Possibile duplicato:
Modifica l’URL della barra degli indirizzi nell’app AJAX in modo che corrisponda allo stato corrente

Come posso modificare l’indirizzo URL senza redirect la pagina?

Ad esempio, quando clicco su questo link qui sotto:

link 

Prenderò l’URL dal link:

 var path = object.attr('href'); 

Se lo faccio qui sotto, la pagina verrà reindirizzata:

 window.location = path; 

Voglio fare qualcosa come questo sito , quando fai clic sull’immagine, la chiamata ajax recupera la pagina richiesta e anche l’indirizzo URL sulla finestra verrà modificato, in modo che abbia un percorso per ciò che fai clic.

NOTA: history.pushState() ora è supportato – vedi altre risposte.

Non è ansible modificare l’intero URL senza redirect, ciò che si può fare invece è modificare l’ hash .

L’ hash è la parte dell’URL che segue il simbolo #. Inizialmente intendeva indirizzarti (localmente) a sezioni del tuo documento HTML, ma puoi leggerlo e modificarlo tramite javascript per utilizzarlo in qualche modo come una variabile globale .


Se applicata bene, questa tecnica è utile in due modi:

  1. la cronologia del browser ricorderà ogni singolo passo che hai compiuto (dal momento che l’url + hash è cambiato)
  2. puoi avere un indirizzo che collega non solo un particolare documento html, ma dà anche al tuo javascript un indizio su cosa fare. Ciò significa che finisci per puntare a uno stato all’interno della tua app web.

Per cambiare l’hash puoi fare:

 document.location.hash = "show_picture"; 

Per vedere le modifiche all’hash devi fare qualcosa del tipo:

 window.onhashchange = function(){ var what_to_do = document.location.hash; if (what_to_do=="#show_picture") show_picture(); } 

Ovviamente l’hash è solo una stringa, quindi puoi fare praticamente quello che ti piace. Ad esempio puoi mettere un intero object lì se usi JSON per renderlo più stringente .

Ci sono ottime librerie JQuery per fare cose avanzate con questo.

Vedi qui – http://my.opera.com/community/forums/topic.dml?id=1319992&t=1331393279&page=1#comment11751402

Essenzialmente:

 history.pushState('data', '', 'http://your-domain/path'); 

Puoi manipolare l’object della cronologia per farlo funzionare.

Funziona solo sullo stesso dominio, ma dal momento che sei soddisfatto dell’utilizzo dell’approccio del tag hash, questo non dovrebbe avere importanza.

Ovviamente avrebbe dovuto essere sottoposto a test cross-browser, ma dato che è stato pubblicato sul forum di Opera, sono sicuro che funzionerebbe in Opera, e l’ho appena testato su Chrome e ha funzionato bene.

Quel sito usa la parte “frammento” di un URL: la roba dopo il “#”. Questo non viene inviato al server dal browser come parte della richiesta GET, ma può essere utilizzato per memorizzare lo stato della pagina. Quindi sì, è ansible modificare il frammento senza causare un aggiornamento della pagina o ricaricare. Quando la pagina viene caricata, il tuo javascript legge questo frammento e aggiorna il contenuto della pagina in modo appropriato, recuperando i dati dal server tramite richieste Ajax come richiesto. Per leggere il frammento in js:

 var fragment = location.hash; 

ma nota che questo valore includerà il carattere “#” all’inizio. Per impostare il frammento:

 location.hash = "your_state_data"; 

Non puoi fare ciò che chiedi (e il sito collegato non fa esattamente questo).

Puoi, tuttavia, modificare la parte dell’URL dopo il segno # , che è chiamato il frammento , in questo modo:

 window.location.hash = 'something'; 

I frammenti non vengono inviati al server (quindi, per esempio, Google stesso non può dire la differenza tra http://www.google.com/ e http://www.google.com/#something ), ma possono essere leggi da Javascript sulla tua pagina. A sua volta, questo Javascript può decidere di eseguire una richiesta AJAX diversa in base al valore del frammento, che è il modo in cui il sito a cui ci si è collegati probabilmente lo fa.

Ciò è ottenuto attraverso la riscrittura degli URL, non attraverso l’offuscamento dell’URL, che non può essere fatto.

Un altro modo per farlo, come è stato menzionato è cambiando l’hashtag, con

 window.location.hash = "/2131/" 

No, perché aprirebbe le porte del phishing. L’unica parte dell’URI che puoi modificare è il frammento (tutto dopo il # ). È ansible farlo impostando window.location.hash .

Non è ansible modificare l’intero URL nella barra degli indirizzi senza reindirizzamento (si pensi ai problemi di sicurezza!).

Tuttavia è ansible modificare la parte hash (che cosa è dopo il # ) e leggere quello: location.hash

ps. impedire il reindirizzamento onclick predefinito di un collegamento da qualcosa di simile:

 $("#link").bind("click",function(e){ doRedirectFunction(); e.preventDefault(); })