Vraag Wijzig de URL zonder de pagina opnieuw te laden


Is er een manier om de URL van de huidige pagina te wijzigen zonder de pagina opnieuw te laden?

Ik zou graag toegang hebben tot de portie voor de # hash indien mogelijk.

Ik hoef alleen maar het gedeelte te veranderen na het domein, dus het is niet alsof ik een beleidoverschrijdend beleid schend.

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

1806
2018-05-05 10:54


oorsprong


antwoorden:


Dit kan nu worden gedaan in Chrome, Safari, FF4 + en IE10pp4 +!

Zie het antwoord van deze vraag voor meer info: De adresbalk bijwerken met nieuwe URL zonder hash of de pagina opnieuw laden

Voorbeeld:

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

Je kunt dan gebruiken window.onpopstate om de navigatie van de navigatie achteruit / vooruit te detecteren:

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

Voor een meer diepgaande kijk op het manipuleren van de browsergeschiedenis dit MDN-artikel.


1628
2017-07-28 15:30



HTML5 introduceerde het history.pushState() en history.replaceState() methoden, waarmee u respectievelijk geschiedenisitems kunt toevoegen en wijzigen.

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

Lees hier meer over hier


381
2017-08-17 13:59



OPMERKING: als u met een werkt HTML5 browser dan moet je dit antwoord negeren. Dit is nu mogelijk zoals te zien is in de andere antwoorden.

Er is geen manier om het te wijzigen URL in de browser zonder de pagina opnieuw te laden. De URL vertegenwoordigt wat de laatst geladen pagina was. Als je het verandert (document.location) dan zal het de pagina herladen.

Een voor de hand liggende reden is dat je een site schrijft www.mysite.com dat lijkt op een inlogpagina van een bank. Vervolgens verander je de browser-urlbalk om te zeggen www.mybank.com. De gebruiker zal zich totaal niet bewust zijn dat ze er echt naar kijken www.mysite.com.


96
2018-05-05 10:57



U kunt ook HTML5 gebruiken replaceState als u de URL wilt wijzigen maar u het item niet wilt toevoegen aan de browsergeschiedenis:

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

Dit zou de functionaliteit van de terugknop 'breken'. Dit kan in sommige gevallen nodig zijn, zoals een afbeeldingengalerij (waar u wilt dat de knop Terug teruggaat naar de indexpagina van de galerij in plaats van terug te gaan door elke afbeelding die u hebt bekeken), terwijl elke afbeelding zijn eigen unieke URL heeft.


93
2017-11-19 10:32



parent.location.hash = "hello";

73
2018-05-13 22:14



Hier is mijn oplossing: (newUrl is je nieuwe URL die je huidige wilt vervangen)

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

44
2018-06-10 18:25



De HTML5 replaceState is het antwoord, zoals al genoemd door Vivart en geo1701. Het wordt echter niet ondersteund in alle browsers / versies. History.js bevat HTML5-toestandsfuncties en biedt extra ondersteuning voor HTML4-browsers.


25
2017-11-21 11:09



Vóór HTML5 kunnen we gebruiken:

parent.location.hash = "hello";

en:

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

Deze methode laadt je pagina opnieuw, maar HTML5 introduceerde de history.pushState(page, caption, replace_url) dat zou je pagina niet moeten herladen.


20
2018-01-24 08:49