Domanda Modifica l'URL senza ricaricare la pagina


C'è un modo per modificare l'URL della pagina corrente senza ricaricare la pagina?

Vorrei accedere alla parte prima l'hash # se possibile.

Ho solo bisogno di cambiare la porzione dopo il dominio, quindi non è come sto violando le politiche di dominio incrociato.

 window.location.href = "www.mysite.com/page2.php";  // sadly this reloads

1805
2018-05-05 10:54


origine


risposte:


Ora è possibile farlo in Chrome, Safari, FF4 + e IE10pp4 +!

Vedi la risposta di questa domanda per maggiori informazioni: Aggiornare la barra degli indirizzi con un nuovo URL senza hash o ricaricare la pagina

Esempio:

 function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

È quindi possibile utilizzare window.onpopstate per rilevare la navigazione del pulsante Indietro / Avanti:

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

Per ulteriori informazioni sulla manipolazione della cronologia del browser, vedere questo articolo MDN.


1628
2017-07-28 15:30



HTML5 ha introdotto il history.pushState() e history.replaceState() metodi, che consentono di aggiungere e modificare le voci della cronologia, rispettivamente.

window.history.pushState('page2', 'Title', '/page2.php');

Maggiori informazioni su questo da Qui


381
2017-08-17 13:59



NOTA: se si sta lavorando con un HTML5 browser, quindi dovresti ignorare questa risposta. Questo è ora possibile come si può vedere nelle altre risposte.

Non c'è modo di modificare il URL nel browser senza ricaricare la pagina. L'URL rappresenta l'ultima pagina caricata. Se lo cambi (document.location) quindi ricaricherà la pagina.

Un motivo ovvio è che scrivi su un sito www.mysite.com sembra una pagina di accesso alla banca. Quindi cambi la barra dell'URL del browser per dire www.mybank.com. L'utente sarà totalmente inconsapevole di stare veramente guardando www.mysite.com.


96
2018-05-05 10:57



Puoi anche usare HTML5 replaceState se vuoi cambiare l'url ma non vuoi aggiungere la voce alla cronologia del browser:

if (window.history.replaceState) {
   //prevents browser from storing history with each change:
   window.history.replaceState(statedata, title, url);
}

Ciò interromperà la funzionalità del pulsante Indietro. Ciò potrebbe essere necessario in alcuni casi, ad esempio in una galleria di immagini (in cui si desidera che il pulsante Indietro torni alla pagina dell'indice della galleria invece di tornare indietro attraverso ogni immagine visualizzata) dando a ciascuna immagine il proprio URL univoco.


93
2017-11-19 10:32



parent.location.hash = "hello";

73
2018-05-13 22:14



Ecco la mia soluzione: (newUrl è il tuo nuovo url che vuoi sostituire quello corrente)

history.pushState({}, null, newUrl);

44
2018-06-10 18:25



HTML5 replaceState è la risposta, come già menzionato da Vivart e geo1701. Tuttavia non è supportato in tutti i browser / versioni. History.js avvolge le funzionalità di stato HTML5 e fornisce supporto aggiuntivo per i browser HTML4.


25
2017-11-21 11:09



Prima di HTML5 possiamo usare:

parent.location.hash = "hello";

e:

window.location.replace("http:www.example.com");

Questo metodo ricaricherà la tua pagina, ma HTML5 ha introdotto il history.pushState(page, caption, replace_url) che non dovrebbe ricaricare la tua pagina.


20
2018-01-24 08:49



Se quello che stai cercando di fare è consentire agli utenti di aggiungere / aggiungere pagine ai segnalibri e non è necessario che sia esattamente l'URL giusto, e non usi ancora hash per altre cose, puoi farlo in due parti; si utilizza il location.hash discusso in precedenza, quindi si implementa un controllo sulla home page, si cerca un URL con un'ancora di hash in esso e si reindirizza al risultato successivo.

Per esempio:

1) L'utente è acceso www.site.com/section/page/4

2) L'utente esegue un'azione che modifica l'URL in www.site.com/#/section/page/6 (con l'hash). Supponiamo che tu abbia caricato il contenuto corretto per pagina 6 nella pagina, quindi, a parte l'hash, l'utente non è troppo disturbato.

3) L'utente passa questo URL a qualcun altro o lo contrassegna come preferito

4) Qualcun altro, o lo stesso utente in una data successiva, va a www.site.com/#/section/page/6

5) Codice attivo www.site.com/ reindirizza l'utente a www.site.com/section/page/6, usando qualcosa come questo:

if (window.location.hash.length > 0){ 
   window.location = window.location.hash.substring(1);
}

Spero che abbia senso! È un approccio utile per alcune situazioni.


18
2018-04-19 11:43