Wie aktualisieren wir URLs oder Abfragezeichenfolgen mit Javascript / jQuery, ohne die Seite neu zu laden?

Gibt es eine Möglichkeit, die URL programmgesteuert zu aktualisieren, ohne die Seite neu zu laden?

BEARBEITEN: Ich habe dem Titel im Beitrag etwas hinzugefügt. Ich möchte nur klarstellen, dass ich die Seite nicht neu laden möchte

Ja - document.location = "http://my.new.url.com"

Sie können es auch auf die gleiche Weise abrufen, z.

var myURL = document.location;
document.location = myURL + "?a=parameter";

Das Standortobjekt hat auch eine Reihe nützlicher Eigenschaften:

hash            Returns the anchor portion of a URL
host            Returns the hostname and port of a URL
hostname        Returns the hostname of a URL
href            Returns the entire URL
pathname        Returns the path name of a URL
port            Returns the port number the server uses for a URL
protocol        Returns the protocol of a URL
search          Returns the query portion of a URL

BEARBEITEN: Wenn Sie den Hash des Dokuments festlegen, sollte die Seite nicht neu geladen werden. Ändern Sie einfach, wo auf der Seite der Fokus liegt. Wenn Sie also auf aktualisieren, #myIdwird mit zu dem Element gescrollt id="myId". Wenn das idnicht existiert, glaube ich, wird nichts passieren? (Muss jedoch in verschiedenen Browsern bestätigt werden)

EDIT2: Um es klar zu machen, nicht nur in einem Kommentar: Sie können nicht die gesamte URL mit Javascript aktualisieren, ohne die Seite zu ändern. Dies ist eine Sicherheitsbeschränkung. Andernfalls können Sie auf einen Link zu einer zufälligen Seite klicken, die so gestaltet ist, dass sie wie Google Mail aussieht, und die URL sofort in www.gmail.com ändern und die Anmeldedaten von Personen stehlen.
Sie können den Teil nach der Domain in einigen Browsern ändern, um mit Dingen im AJAX-Stil fertig zu werden, aber das wurde bereits von Osiris verlinkt. Darüber hinaus sollten Sie dies wahrscheinlich nicht tun, selbst wenn Sie könnten. Die URL teilt dem Benutzer mit, wo er sich auf Ihrer Website befindet. Wenn Sie es ändern, ohne den Seiteninhalt zu ändern, wird es etwas verwirrend.

Ja und nein. Alle gängigen Webbrowser verfügen über eine Sicherheitsmaßnahme, um dies zu verhindern. Ziel ist es, zu verhindern, dass Personen Replikate von Websites erstellen, die URL so ändern, dass sie korrekt aussieht, und dann in der Lage zu sein, Personen auszutricksen und ihre Informationen abzurufen.

Einige HTML5-kompatible Webbrowser haben jedoch eine Verlaufs-API implementiert, die für ähnliche Aufgaben verwendet werden kann:

if (history.pushState) {
    var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?myNewUrlQuery=1';
    window.history.pushState({path:newurl},'',newurl);
}

Ich habe getestet und es hat gut funktioniert. Die Seite wird nicht neu geladen, sondern Sie können nur die URL-Abfrage ändern. Sie können das Protokoll oder die Hostwerte nicht ändern.

Für mehr Informationen:

http://diveintohtml5.info/history.html

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Sie können verwenden:

window.history.pushState('obj', 'newtitle', newUrlWithQueryString)

Verwenden

window.history.replaceState ({}, document.title, updatedUri);

So aktualisieren Sie die URL, ohne die Seite neu zu laden

 var url = window.location.href;
 var urlParts = url.split('?');
 if (urlParts.length > 0) {
     var baseUrl = urlParts[0];
     var queryString = urlParts[1];

     //update queryString in here...I have added a new string at the end in this example
     var updatedQueryString = queryString + 'this_is_the_new_url' 

     var updatedUri = baseUrl + '?' + updatedQueryString;
     window.history.replaceState({}, document.title, updatedUri);
 }

So entfernen Sie die Abfragezeichenfolge, ohne die Seite neu zu laden

var url = window.location.href;
if (url.indexOf("?") > 0) {
     var updatedUri = url.substring(0, url.indexOf("?"));
     window.history.replaceState({}, document.title, updatedUri);
}

Ja

document.location ist der normale Weg.

Document.location ist jedoch praktisch identisch mit window.location, außer dass window.location in älteren Browsern etwas besser unterstützt wird und daher möglicherweise die bevorzugte Wahl ist.

Schauen Sie sich diesen Thread auf SO für weitere Informationen:

Was ist der Unterschied zwischen window.location und document.location in JavaScript?

Definieren Sie ein neues URL-Objekt, weisen Sie ihm die aktuelle URL zu, hängen Sie Ihre Parameter an dieses URL-Objekt an und verschieben Sie es schließlich in den Status Ihres Browsers.

var url = new URL(window.location.href);
//var url = new URL(window.location.origin + window.location.pathname) <- flush existing parameters
url.searchParams.append("order", orderId);
window.history.pushState(null, null, url);

Die Präfix-URL ändert sich mit einem Hashtag, um eine Umleitung zu vermeiden.

Dies leitet um

location.href += '&test='true';

Dies leitet nicht um

location.href += '#&test='true';

Einfaches Javascript: document.location = 'http://www.google.com';

Dies führt jedoch zu einer Aktualisierung des Browsers. Verwenden Sie möglicherweise Hashes, wenn die URL aktualisiert werden muss, um einen Browserverlauf zu implementieren, ohne die Seite neu zu laden. In diesem Fall sollten Sie sich jQuery.hashchange ansehen.

Sie müssen genauer sein. Was meinst du mit "URL aktualisieren"? Es könnte bedeuten, automatisch zu einer anderen Seite zu navigieren, was sicherlich möglich ist.

Wenn Sie nur den Inhalt der Adressleiste aktualisieren möchten, ohne die Seite neu zu laden , lesen Sie Ändern der URL, ohne die Seite neu zu laden

Ja - document.location.hashfür Fragen