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

Question

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

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

Sto cercando di registrare lo stato JavaScript nell'URL.

Answer 1

Con HTML 5, utilizza la history.pushState . Ad 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 invece history.replaceState.

Answer 2

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

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

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

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

Answer 3

window.location.href contiene l'URL corrente. Puoi leggere da esso, puoi aggiungerlo e puoi sostituirlo, il che potrebbe 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 pezzo di javascript sia attivato dall'evento onload analizzare l'URL corrente 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.

Answer 4

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, le persone potrebbero essere in grado di suggerire approcci alternativi ...

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

Answer 5

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).

In questo caso, spesso userò solo 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.

Answer 6

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

JavaScript pushState e 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 stato & # 8212; L'oggetto state è un oggetto JavaScript associato alla nuova voce della cronologia creata da <=>. 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 stato può essere qualsiasi cosa che può essere serializzata. 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 è maggiore di questa a <=>, il metodo genererà un'eccezione. Se hai bisogno di più spazio di questo, sei incoraggiato a utilizzare sessionStorage e / o localStorage.

2. titolo & # 8212; 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 & # 8212; 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 a <=>, 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, <=> genererà un'eccezione. Questo parametro è facoltativo; se non è specificato, è impostato sull'URL corrente del documento.

Answer 7

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

Answer 8

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.

Answer 9

Esiste un plug-in jquery http://www.asual.com/jquery/address/

Penso che questo sia ciò di cui hai bisogno.

Answer 10

Quello che funziona per me è - history.replaceState() funzione che è la seguente -

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

Questa non ricaricherà la pagina, puoi usarla con l'evento di javascript

Answer 11

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ò farmi fare location.append = new.html e la pagina diventa: http://domain.com/site/page.htmlnew.html e il browser non la modifica.

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

La pagina originale diventa http://domain.com/site/page.html?me=1&page=1 e 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 <- href = "http://en.wikipedia.org/wiki/Ajax_%28programming%29" rel = "nofollow noreferrer "> Ajax è 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 viene utilizzato un div per gestire diversi metodi di lavoro straordinario, i dati non vengono archiviati per ogni stato della cronologia.

Answer 12

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;
    });
});

Questo è tutto :)

Answer 13

Ho avuto successo con:

location.hash="myValue";

Aggiunge semplicemente #myValue all'URL corrente. Se è necessario attivare un evento nella pagina Carica, è possibile utilizzare lo stesso location.hash per verificare il valore pertinente. Ricorda solo di rimuovere # dal valore restituito da <=> ad esempio

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

Answer 14

Una risposta più semplice che presento,

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

questo aggiungerà /abc dopo 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 & Quot; https://stackoverflow.com/abc <> quot;