javascript - Hvordan endrer jeg URL-en uten å laste siden på nytt?

Finnes det en måte jeg kan endre URL-en til den nåværende siden på uten å laste siden på nytt?

Jeg vil gjerne få tilgang til delen før # hash hvis mulig.

Jeg trenger bare å endre delen etter domenet, så det er ikke som om jeg bryter tverrdomene-politikk.

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

Svar #1

Dette kan nå gjøres i Chrome, Safari, Firefox 4+, og Internet Explorer 10pp4+!

Se svaret på dette spørsmålet for mer informasjon: Oppdatere adressefeltet med ny URL uten #-tegn eller å laste siden på nytt

Eksempel :

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

Du kan deretter bruke window.onpopstate eller window.addEventListener for å oppdage navigering med tilbake-/framoverknappen:

window.addEventListener("popstate", (e) => {
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
});

For en mer inngående titt på å manipulere nettleserlogg, se denne artikkelen på MDN.

Svar #2

HTML5 introduserte metodene history.pushState() og history.replaceState(), som lar deg legge til og endre historikkoppføringer, henholdsvis.

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

Les mer om dette herfra

Svar #3

Du kan også bruke HTML5 replaceState hvis du vil endre URL-en, men ikke ønsker å legge til oppføringen i nettleserhistorikken:

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

Dette ville 'bryte' tilbake-knappen funksjonaliteten. Dette kan være nødvendig i noen tilfeller som for eksempel et bildegalleri (hvor du vil at tilbake-knappen skal gå tilbake til galleriets indeks-side i stedet for å gå tilbake gjennom hvert eneste bilde du har sett) samtidig som hvert bilde får sin egen unike URL.

Svar #4

    // replace current URL with newURL
    history.pushState({}, null, newURL);

Svar #5

MERKNAD: Hvis du bruker en HTML5-nettleser, bør du ignorere dette svaret. Dette er nå mulig, som det kan sees i de andre svarene.

Det er ingen måte å endre URL-en i nettleseren uten å laste siden på nytt. URL-en representerer hva den sist lastede siden var. Hvis du endrer den (document.location), vil den laste siden på nytt.

En åpenbar grunn er at du skriver en side på www.mysite.com som ser ut som en bankinnloggingsside. Deretter endrer du nettleserens URL-linje til å si www.mybank.com. Brukeren vil være helt uvitende om at de faktisk ser på www.mysite.com.

Svar #6

parent.location.hash = "hello";

Svar #7

I moderne nettlesere og HTML5 finnes det en metode kalt pushState på vinduets history. Den vil endre URL-en og legge den til i historikken uten å laste siden på nytt.

Du kan bruke det slik, det vil ta 3 parametere: 1) tilstandsobjekt 2) tittel og en URL):

window.history.pushState({page: "another"}, "another page", "example.html");

Dette vil endre URL-en, men ikke laste siden på nytt. I tillegg sjekker det ikke om siden eksisterer, så hvis du gjør noe JavaScript-kode som reagerer på URL-en, kan du jobbe med dem på denne måten.

Det finnes også history.replaceState(), som gjør akkurat det samme, bortsett fra at det vil endre den nåværende historikken i stedet for å lage en ny!

Du kan også lage en funksjon for å sjekke om history.pushState eksisterer, og deretter fortsette med resten slik:

function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);
  }
}

goTo("another page", "example", 'example.html');

Du kan også endre # til <HTML5-nettlesere, som ikke vil laste siden på nytt. Det er slik Angular bruker for å lage SPA i henhold til hashtag...

Å endre # er ganske enkelt, gjør slik:

window.location.hash = "example";

Og du kan oppdage det på denne måten:

window.onhashchange = function () {
  console.log("#changed", window.location.hash);
}

Svar #8

HTML5 replaceState er svaret, som allerede nevnt av Vivart og geo1701. Det er imidlertid ikke støttet i alle nettlesere/versjoner. History.js pakker inn HTML5-statistikkfunksjoner og gir ekstra støtte for HTML4-nettlesere.

Svar #9

Før HTML5 kunne vi bruke:

parent.location.hash = "hello";

og :

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

Denne metoden vil laste siden din på nytt, men HTML5 introduserte history.pushState(page, caption, replace_url) som ikke skal laste siden din på nytt.

Svar #10

Hvis det du prøver å gjøre er å la brukere bokmerke/dele sider, og du ikke trenger at det er akkurat riktig URL, og du ikke bruker hash-ankere til noe annet, kan du gjøre dette i to deler; du bruker location.hash nevnt ovenfor, og deretter implementerer du en sjekk på startsiden for å se etter en URL med et hash-anker i den, og omdirigere deg til det påfølgende resultatet.

For eksempel:

  1. Brukeren er på www.site.com/section/page/4

  2. Brukeren utfører en handling som endrer URL-en til www.site.com/#/section/page/6 (med hash). Si at du har lastet inn riktig innhold for side 6 på siden, så bortsett fra hashen er ikke brukeren altfor forstyrret.

  3. Brukeren sender denne nettadressen videre til noen andre, eller legger den til i bokmerkene

  4. En annen person, eller samme bruker på et senere tidspunkt, går til www.site.com/#/section/page/6

  5. Kode på www.site.com/ videresender brukeren til www.site.com/section/page/6, ved å bruke noe som dette:

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

Håper det gir mening! Det er en nyttig tilnærming for noen situasjoner.

Svar #11

Du kan bruke denne vakre og enkle funksjonen til å gjøre det hvor som helst i applikasjonen din.

function changeurl(url, title) {
    var new_url = '/' + url;
    window.history.pushState('data', title, new_url);
    
}

Du kan ikke bare redigere URL-en, men du kan også oppdatere tittelen sammen med den.

Svar #12

Nedenfor er funksjonen for å endre URL-en uten å laste siden på nytt. Den støttes kun for HTML5.

  function ChangeUrl(page, url) {
        if (typeof (history.pushState) != "undefined") {
            var obj = {Page: page, Url: url};
            history.pushState(obj, obj.Page, obj.Url);
        } else {
            window.location.href = "homePage";
            // alert("Browser does not support HTML5.");
        }
    }

  ChangeUrl('Page1', 'homePage');

Svar #13

Eventuelle endringer av plasseringen (enten window.location eller document.location) vil føre til en forespørsel på den nye URL-en, hvis du ikke bare endrer URL-fragmentet. Hvis du endrer URL-en, endrer du URL-en.

Bruk server-side URL-omskrivningsteknikker som Apaches mod_rewrite hvis du ikke liker URL-ene du bruker for øyeblikket.

Svar #14

Du kan legge til ankermerker. Jeg bruker dette på nettstedet mitt slik at jeg kan spore med Google Analytics hva folk besøker på siden.

Jeg legger bare til en anker-tag og deretter delen av siden jeg vil spore:

var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href = "http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);

Relaterte artikler