Modifica l'URL nel browser senza caricare la nuova pagina utilizzando JavaScript

Come potrei avere un'azione JavaScript che potrebbe avere degli effetti sulla pagina corrente ma che cambierebbe anche l'URL nel browser, quindi se l'utente preme ricaricare o aggiungere un segnalibro, verrà usato il nuovo URL?

Sarebbe anche bello se il pulsante Indietro ricaricasse l'URL originale.

Sto cercando di registrare lo stato JavaScript nell'URL.

Con HTML 5, utilizzare la history.pushStatefunzione . Come esempio:

<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

e un href:

<a href="#" id='click'>Click to change url to bar.html</a>

Se si desidera modificare l'URL senza aggiungere una voce all'elenco dei pulsanti indietro, utilizzare history.replaceStateinvece.

Se vuoi che funzioni nei browser che non supportano history.pushStatee history.popStateancora, il modo "vecchio" è quello di impostare l'identificatore di frammento, che non causerà il ricaricamento della pagina.

L'idea di base è impostare la window.location.hashproprietà su un valore che contenga le informazioni sullo stato necessarie, quindi utilizzare l' evento window.onhashchange o per browser meno recenti che non supportano onhashchange(IE <8, Firefox <3.6), controllare periodicamente su controlla se l'hash è cambiato (usando setIntervalad esempio) e aggiorna la pagina. Dovrai anche controllare il valore di hash al caricamento della pagina per impostare il contenuto iniziale.

Se stai usando jQuery c'è un plugin hashchange che utilizzerà qualunque metodo supportato dal browser. Sono sicuro che ci sono plugin anche per altre librerie.

Una cosa da fare attenzione è quella di scontrarsi con gli ID sulla pagina, perché il browser scorrerà su qualsiasi elemento con un ID corrispondente.

window.location.href contiene l'URL corrente. Puoi leggere da esso, puoi aggiungerlo e puoi sostituirlo, il che può causare un ricaricamento della pagina.

Se, come sembra, vuoi registrare lo stato javascript nell'URL in modo che possa essere aggiunto ai segnalibri, senza ricaricare la pagina, aggiungilo all'URL corrente dopo un # e fai in modo che un frammento di javascript attivato dall'evento onload analizzi l'attuale URL per vedere se contiene lo stato salvato.

Se usi un? invece di un #, forzerai un ricaricamento della pagina, ma dal momento che analizzerai lo stato salvato al caricamento questo potrebbe non essere effettivamente un problema; e questo farà funzionare correttamente anche i pulsanti avanti e indietro.

Sospetto fortemente che ciò non sia possibile, perché sarebbe un incredibile problema di sicurezza. Ad esempio, potrei creare una pagina che assomiglia a una pagina di accesso alla banca e rendere l'URL nella barra degli indirizzi proprio come la vera banca !

Forse se spieghi perché vuoi farlo, la gente potrebbe essere in grado di suggerire approcci alternativi ...

[Modifica nel 2011: da quando ho scritto questa risposta nel 2008, sono venute alla luce ulteriori informazioni su una tecnica HTML5 che consente di modificare l'URL purché provenga dalla stessa origine]

Le impostazioni di sicurezza del browser impediscono alle persone di modificare direttamente l'URL visualizzato. Potresti immaginare le vulnerabilità di phishing che potrebbero causare.

L'unico modo affidabile per cambiare l'URL senza cambiare pagina è usare un link interno o un hash. ad es .: http://site.com/page.html diventa http://site.com/page.html#item1 . Questa tecnica viene spesso utilizzata in hijax (AJAX + conserva la cronologia).

Nel fare ciò, spesso userò solo i collegamenti per le azioni con l'hash come href, quindi aggiungerò eventi di clic con jquery che utilizzano l'hash richiesto per determinare e delegare l'azione.

Spero che ti metta sulla strada giusta.

jQuery ha un ottimo plugin per cambiare l'URL del browser, chiamato jQuery-pusher .

JavaScript pushStatee jQuery potrebbero essere usati insieme, come:

history.pushState(null, null, $(this).attr('href'));

Esempio:

$('a').click(function (event) {

  // Prevent default click action
  event.preventDefault();     

  // Detect if pushState is available
  if(history.pushState) {
    history.pushState(null, null, $(this).attr('href'));
  }
  return false;
});

Utilizzando solo JavaScript history.pushState() , che modifica il referrer, che viene utilizzato nell'intestazione HTTP per gli oggetti XMLHttpRequest creati dopo aver modificato lo stato.

Esempio:

window.history.pushState("object", "Your New Title", "/new-url");

Il metodo pushState ():

pushState()accetta tre parametri: un oggetto stato, un titolo (che è attualmente ignorato) e (facoltativamente) un URL. Esaminiamo ciascuno di questi tre parametri in modo più dettagliato:

1. oggetto state - L'oggetto state è un oggetto JavaScript associato alla nuova voce della cronologia creata da pushState(). Ogni volta che l'utente passa al nuovo stato, viene generato un evento popstate e la proprietà state dell'evento contiene una copia dell'oggetto stato della voce della cronologia.

   L'oggetto state può essere tutto ciò che può essere serializzato. Poiché Firefox salva gli oggetti di stato sul disco dell'utente in modo che possano essere ripristinati dopo che l'utente ha riavviato il browser, imponiamo un limite di dimensioni di 640k caratteri sulla rappresentazione serializzata di un oggetto di stato. Se si passa un oggetto stato la cui rappresentazione serializzata è più grande di questa pushState(), il metodo genererà un'eccezione. Se hai bisogno di più spazio di questo, sei incoraggiato a utilizzare sessionStorage e / o localStorage.

2. titolo - Firefox attualmente ignora questo parametro, sebbene possa utilizzarlo in futuro. Passare la stringa vuota qui dovrebbe essere sicuro contro future modifiche al metodo. In alternativa, potresti passare un breve titolo per lo stato in cui ti stai trasferendo.

3. URL : l' URL della nuova voce della cronologia è dato da questo parametro. Si noti che il browser non tenterà di caricare questo URL dopo una chiamata 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, viene risolto rispetto all'URL corrente. Il nuovo URL deve avere la stessa origine dell'URL corrente; in caso contrario, pushState()verrà generata un'eccezione. Questo parametro è facoltativo; se non è specificato, è impostato sull'URL corrente del documento.

Esiste un componente Yahoo YUI (Browser History Manager) che può gestire questo: http://developer.yahoo.com/yui/history/

La galleria fotografica di Facebook lo fa usando un #hash nell'URL. Ecco alcuni URL di esempio:

Prima di fare clic su "Avanti":

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507

Dopo aver fatto clic su "Avanti":

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507#!/photo.php?fbid=496435457507&set=a.218088072507.133423.681812507&pid=5887085&id=681812507

Nota l'hash-bang (#!) Immediatamente seguito dal nuovo URL.

C'è un plugin jquery http://www.asual.com/jquery/address/

Penso che questo sia ciò di cui hai bisogno.

Ciò che funziona per me è: history.replaceState()funzione che è la seguente:

history.replaceState(data,"Title of page"[,'url-of-the-page']);

Questo non ricaricherà la pagina, puoi usarlo con l'evento di javascript

Mi chiedevo se fosse possibile fintanto che il percorso principale nella pagina è lo stesso, solo qualcosa di nuovo viene aggiunto ad esso.

Quindi diciamo che l'utente è nella pagina: http://domain.com/site/page.html quindi il browser può lasciarmi fare location.append = new.html e la pagina diventa: http://domain.com/site/page.htmlnew.htmle il browser non la modifica.

O semplicemente consenti alla persona di cambiare il parametro get, quindi andiamo location.get = me=1&page=1.

Quindi la pagina originale diventa http://domain.com/site/page.html?me=1&page=1e non si aggiorna.

Il problema con # è che i dati non vengono memorizzati nella cache (almeno non credo) quando viene modificato l'hash. Quindi è come ogni volta che viene caricata una nuova pagina, mentre i pulsanti avanti e indietro in un non Ajax pagina sono in grado di memorizzare nella cache i dati e non perdere tempo a ricaricare i dati.

Da quello che ho visto, la storia di Yahoo carica già tutti i dati contemporaneamente. Sembra che non stia facendo alcuna richiesta Ajax. Pertanto, quando a divviene utilizzato per gestire un metodo diverso nel tempo, i dati non vengono archiviati per ogni stato della cronologia.

il mio codice è:

//change address bar
function setLocation(curLoc){
    try {
        history.pushState(null, null, curLoc);
        return false;
    } catch(e) {}
        location.hash = '#' + curLoc;
}

e azione:

setLocation('http://example.com/your-url-here');

ed esempio

$(document).ready(function(){
    $('nav li a').on('click', function(){
        if($(this).hasClass('active')) {

        } else {
            setLocation($(this).attr('href'));
        }
            return false;
    });
});

È tutto :)

Una risposta più semplice che presento,

window.history.pushState(null, null, "/abc")

questo verrà aggiunto /abcdopo il nome di dominio nell'URL del browser. Basta copiare questo codice e incollarlo nella console del browser e vedere l'URL che cambia in " https://stackoverflow.com/abc "

Ho avuto successo con:

location.hash="myValue";

Si aggiunge solo #myValueall'URL corrente. Se è necessario attivare un evento nella pagina Carica, è possibile utilizzare lo stesso location.hashper verificare il valore pertinente. Basta ricordare di rimuovere il #dal valore restituito da location.hashes

var articleId = window.location.hash.replace("#","");