Frage Ändern Sie die URL, ohne die Seite neu zu laden


Gibt es eine Möglichkeit, die URL der aktuellen Seite zu ändern, ohne die Seite neu zu laden?

Ich möchte auf die Portion zugreifen Vor der # Hash wenn möglich.

Ich muss nur den Teil ändern nach die Domain, es ist also nicht so, als würde ich Cross-Domain-Richtlinien verletzen.

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

1806
2018-05-05 10:54


Ursprung


Antworten:


Dies kann jetzt in Chrome, Safari, FF4 + und IE10pp4 + erfolgen!

Siehe die Antwort dieser Frage für weitere Informationen: Aktualisieren der Adressleiste mit neuer URL ohne Hash oder Neuladen der Seite

Beispiel:

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

Sie können dann verwenden window.onpopstate um die Vorwärts- / Rückwärts-Navigation zu erkennen:

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

Für einen tieferen Einblick in die Manipulation des Browserverlaufs siehe Dieser MDN-Artikel.


1628
2017-07-28 15:30



HTML5 führte die history.pushState() und history.replaceState() Methoden, mit denen Sie Verlaufseinträge hinzufügen bzw. ändern können.

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

Lesen Sie mehr dazu von Hier


381
2017-08-17 13:59



HINWEIS: Wenn Sie mit einem HTML5 Browser dann sollten Sie diese Antwort ignorieren. Dies ist jetzt möglich, wie in den anderen Antworten zu sehen ist.

Es gibt keine Möglichkeit, das zu ändern URL im Browser, ohne die Seite neu zu laden. Die URL stellt dar, was die zuletzt geladene Seite war. Wenn Sie es ändern (document.location) dann wird die Seite neu geladen.

Ein offensichtlicher Grund dafür ist, dass Sie eine Website schreiben www.mysite.com Das sieht wie eine Bank Login-Seite aus. Dann ändern Sie die Browser-URL-Leiste, um zu sagen www.mybank.com. Der Benutzer wird sich nicht bewusst sein, dass sie wirklich schauen www.mysite.com.


96
2018-05-05 10:57



Sie können auch HTML5 verwenden replaceState Wenn Sie die URL ändern möchten, aber den Eintrag nicht zum Browserverlauf hinzufügen möchten:

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

Dies würde die Funktionalität der Zurück-Schaltfläche "brechen". Dies kann in einigen Fällen erforderlich sein, z. B. in einer Bildergalerie (bei der die Schaltfläche Zurück zur Galerie-Indexseite zurückkehren soll, anstatt jedes Bild, das Sie angesehen haben, zurückzugehen), während jedem Bild eine eigene eindeutige URL zugewiesen wird.


93
2017-11-19 10:32



parent.location.hash = "hello";

73
2018-05-13 22:14



Hier ist meine Lösung: (newUrl ist deine neue URL, die du ersetzen willst)

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

44
2018-06-10 18:25



Der HTML5 replaceState ist die Antwort, wie bereits von Vivart und geo1701 erwähnt. Es wird jedoch nicht in allen Browsern / Versionen unterstützt. Geschichte.js umschließt HTML5-Statusfunktionen und bietet zusätzliche Unterstützung für HTML4-Browser.


25
2017-11-21 11:09



Vor HTML5 können wir verwenden:

parent.location.hash = "hello";

und:

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

Diese Methode lädt Ihre Seite neu, aber HTML5 führte die history.pushState(page, caption, replace_url) das sollte deine Seite nicht laden.


20
2018-01-24 08:49



Wenn Sie Benutzern nur erlauben möchten, Seiten mit Lesezeichen zu versehen oder Seiten zu teilen, und Sie brauchen nicht, dass sie genau die richtige URL ist, und Sie Hash-Anker für nichts anderes verwenden, können Sie dies in zwei Schritten tun Teile; Sie verwenden die oben beschriebene location.hash und implementieren dann eine Überprüfung auf der Homepage, um nach einer URL mit einem Hash-Anker zu suchen und Sie zum nächsten Ergebnis umzuleiten.

Zum Beispiel:

1) Benutzer ist eingeschaltet www.site.com/section/page/4

2) Der Benutzer führt eine Aktion aus, die die URL in ändert www.site.com/#/section/page/6 (mit dem Hash). Angenommen, Sie haben den richtigen Inhalt für Seite 6 in die Seite geladen, so dass der Benutzer abgesehen vom Hash nicht zu sehr gestört wird.

3) Der Nutzer gibt diese URL an eine andere Person weiter oder bucht sie

4) Eine andere Person oder derselbe Benutzer zu einem späteren Zeitpunkt geht zu www.site.com/#/section/page/6

5) Code an www.site.com/ leitet den Benutzer zu www.site.com/section/page/6mit etwas wie diesem:

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

Hoffnung, die Sinn macht! Es ist ein nützlicher Ansatz für einige Situationen.


18
2018-04-19 11:43



Irgendwelche Änderungen der Position (entweder window.location oder document.location) wird eine Anforderung für diese neue URL verursachen, wenn Sie nicht nur das URL-Fragment ändern. Wenn Sie die URL ändern, ändern Sie die URL.

Verwenden Sie serverseitige URL-Rewrite-Techniken wie Apache mod_rewrite wenn Sie die URLs, die Sie gerade verwenden, nicht mögen.


12
2018-05-05 10:58



Sie können Anker-Tags hinzufügen. Ich benutze das auf meiner Website http://www.piano-chords.net/ damit ich mit Google Analytics verfolgen kann, was Leute auf der Seite besuchen. Ich füge einfach ein Anker-Tag hinzu und dann den Teil der Seite, den ich verfolgen möchte.

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

11
2017-12-13 22:57