ändern - window url javascript




Ändern Sie die URL, ohne die Seite neu zu laden (12)

Angenommen, Sie versuchen nicht, etwas Böswilliges zu tun, kann alles, was Sie mit Ihren eigenen URLs machen möchten, mit htaccess in ein htaccess .

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

Ich würde gerne auf den Teil vor dem # Hash zugreifen, wenn möglich.

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

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

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.


Es ist möglich ohne Hashes zu verwenden, werfen Sie einen Blick auf das asual jQuery Address Plugin :

Beispiel here .

Beachten Sie, dass es Hashes in IE verwendet, es gibt keine Problemumgehung für es.


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

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

Jede Änderung der Position (entweder window.location oder document.location ) führt 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-Rewrite-Techniken wie Apache mod_rewrite, wenn Sie die URLs, die Sie gerade verwenden, nicht mögen.


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

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

Lesen Sie mehr dazu here


Sie können HTML5 replaceState auch verwenden, wenn Sie die URL ändern möchten, den Eintrag jedoch 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.


Unten ist die Funktion zum Ändern der URL ohne Neuladen der Seite. Es unterstützt nur 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');

Verwenden Sie window.history.pushState("object or string", "Title", "/new-url") , aber es wird immer noch eine neue URL-Anfrage an den Server gesendet


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 den history.pushState(page, caption, replace_url) , der Ihre Seite nicht neu laden sollte.


Wie Thomas Stjernegaard Jeppesen bemerkte, könnten Sie mit History.js URL-Parameter ändern, während der Benutzer durch Ihre Ajax-Links und -Apps navigiert.

Fast ein Jahr ist seit dieser Antwort vergangen und History.js wuchs und wurde stabiler und browserübergreifend. Jetzt kann es zum Verwalten von Verlaufsstatus in HTML5-konformen sowie in vielen HTML4-only Browsern verwendet werden. In dieser Demo können Sie ein Beispiel sehen, wie es funktioniert (und auch seine Funktionalitäten und Grenzen testen können).

Sollten Sie Hilfe bei der Verwendung und Implementierung dieser Bibliothek benötigen, schlage ich vor, dass Sie sich den Quellcode der Demoseite ansehen: Sie werden sehen, dass es sehr einfach ist.

Schließlich, für eine umfassende Erklärung, was die Probleme bei der Verwendung von Hashes (und Hashbangs) sein können, lesen Sie diesen Link von Benjamin Lupton.


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 ist.

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

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







friendly-url