web-dev-qa-db-de.com

Wie ändere ich die URL, ohne die Seite neu zu laden?

Kann ich die URL der aktuellen Seite ändern, ohne die Seite neu zu laden?

Ich möchte auf den Teil vorher den # -Hash zugreifen, wenn möglich.

Ich muss nur den Teil nach der Domain ändern, damit ich nicht gegen domänenübergreifende Richtlinien verstoße.

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

Dies ist jetzt in Chrome, Safari, Firefox 4+ und Internet Explorer 10pp4 + möglich!

Weitere Informationen finden Sie in der Antwort zu dieser Frage: 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 window.onpopstate verwenden, um die Vorwärts-/Rückwärtsnavigation zu erkennen:

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

Weitere Informationen zum Bearbeiten des Browserverlaufs finden Sie unter dieser MDN-Artikel .

1861
David Murdoch

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

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

Lesen Sie mehr darüber von hier

496
Vivart

Sie können auch HTML5 replaceState verwenden, wenn Sie die URL ändern, 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-Taste "unterbrechen". Dies kann in einigen Fällen erforderlich sein, z. B. in einer Bildergalerie (wenn Sie möchten, dass die Zurück-Schaltfläche zur Galerie-Indexseite zurückkehrt, anstatt sich durch jedes einzelne angezeigte Bild zu bewegen), während Sie jedem Bild eine eigene URL zuweisen.

113

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

Es ist nicht möglich, URL im Browser zu ändern, ohne die Seite neu zu laden. Die URL repräsentiert die zuletzt geladene Seite. Wenn Sie es ändern (document.location), wird die Seite neu geladen.

Ein offensichtlicher Grund ist, dass Sie auf www.mysite.com eine Site schreiben, die aussieht wie eine Bankanmeldeseite. Anschließend ändern Sie die URL-Leiste des Browsers in www.mybank.com. Der Benutzer merkt gar nicht, dass er sich wirklich www.mysite.com ansieht.

101
Robin Day

Hier ist meine Lösung (newUrl ist Ihre neue URL, die Sie durch die aktuelle URL ersetzen möchten):

history.pushState({}, null, newUrl);
79
Haimei
parent.location.hash = "hello";
78
Steve

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

In modernen Browsern und HTML5 gibt es eine Methode namens pushState im Fenster history. Dadurch wird die URL geändert und in den Verlauf verschoben, ohne die Seite zu laden.

Sie können es wie folgt verwenden, es werden 3 Parameter benötigt, 1) Statusobjekt 2) Titel und eine URL):

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

Dadurch wird die URL geändert, die Seite jedoch nicht neu geladen. Außerdem wird nicht überprüft, ob die Seite vorhanden ist. Wenn Sie also JavaScript-Code verwenden, der auf die URL reagiert, können Sie so damit arbeiten.

Es gibt auch history.replaceState(), das genau das Gleiche tut, außer dass es den aktuellen Verlauf ändert, anstatt einen neuen zu erstellen!

Sie können auch eine Funktion erstellen, um zu überprüfen, ob history.pushState vorhanden ist. Fahren Sie dann mit dem Rest wie folgt fort:

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

Sie können auch den # für <HTML5 browsers ändern, wodurch die Seite nicht neu geladen wird. So macht Angular SPA laut Hashtag ...

Das Ändern von # ist ganz einfach.

window.location.hash = "example";

Und Sie können es so erkennen:

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

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 hat die Funktion history.pushState(page, caption, replace_url) eingeführt, die Ihre Seite nicht neu laden sollte.

21
Shine

Wenn Sie versuchen, Benutzern zu ermöglichen, Seiten mit Lesezeichen zu versehen/freizugeben, und es nicht unbedingt die richtige URL sein muss und Sie für nichts anderes Hashanker verwenden, können Sie dies in zwei Schritten tun Teile; Sie verwenden die oben erläuterte Datei location.hash und führen dann auf der Homepage eine Überprüfung durch, um nach einer URL mit einem darin enthaltenen Hash-Anker zu suchen und Sie zum nachfolgenden Ergebnis umzuleiten.

Zum Beispiel:

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

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

3) Der Benutzer gibt diese URL an eine andere Person weiter oder speichert sie als Lesezeichen

4) Jemand anderes oder derselbe Benutzer zu einem späteren Zeitpunkt wechselt zu www.site.com/#/section/page/6

5) Code auf www.site.com/ leitet den Benutzer zu www.site.com/section/page/6 weiter.

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

Hoffe das macht Sinn! In manchen Situationen ist dies ein nützlicher Ansatz.

20
Jeremy Warne

Im Folgenden finden Sie die Funktion zum Ändern der URL, ohne die Seite neu zu laden. Es wird nur für HTML5 unterstützt.

  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');
13
Suraj

Änderungen an der Auswahl (entweder window.location oder document.location) führen zu einer Anforderung für diese neue URL, wenn Sie nicht nur das URL-Fragment ändern. Wenn Sie die URL ändern, ändern Sie die URL.

Verwenden Sie serverseitige URL-Umschreibungstechniken wie Apaches mod_rewrite , wenn Sie die aktuell verwendeten URLs nicht mögen.

12
Gumbo

Sie können Ankertags hinzufügen. Ich verwende dies auf meiner Website http://www.piano-chords.net/ , damit ich mit Google Analytics nachverfolgen kann, welche Personen auf der Seite besucht werden.

Ich füge nur ein Anker-Tag und dann den Teil der Seite hinzu, den ich verfolgen möchte:

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

Wie von Thomas Stjernegaard Jeppesen hervorgehoben, können Sie History.js verwenden, um URL-Parameter zu ändern, während der Benutzer durch Ihre Ajax-Links und -Apps navigiert.

Seit dieser Antwort ist fast ein Jahr vergangen, und History.js wuchs und wurde stabiler und browserübergreifender. Jetzt können damit Verlaufszustände sowohl in HTML5-kompatiblen als auch in vielen HTML4-Browsern verwaltet werden. In dieser Demo Sie können ein Beispiel sehen, wie es funktioniert (und seine Funktionen und Grenzen ausprobieren.

Wenn Sie Hilfe bei der Verwendung und Implementierung dieser Bibliothek benötigen, empfehle ich Ihnen, sich den Quellcode der Demoseite anzusehen: Sie werden feststellen, dass dies sehr einfach ist.

Um eine umfassende Erklärung der möglichen Probleme bei der Verwendung von Hashes (und Hashbangs) zu erhalten, lesen Sie diesen Link von Benjamin Lupton.

7
Erenor Paz

Verwenden Sie history.pushState() aus der HTML 5-Protokoll-API.

Weitere Informationen finden Sie in HTML5 History API .

4