Gibt es eine Möglichkeit, die Adressleiste des Browsers zu ändern, ohne die Seite zu aktualisieren?

91

Ich entwickle eine Web-App. Darin befindet sich ein Abschnitt namens Kategorien, in dem jedes Mal, wenn ein Benutzer auf eine der Kategorien klickt, ein Update-Bereich den entsprechenden Inhalt lädt.

Nachdem der Benutzer auf die Kategorie geklickt hat, möchte ich die Adressleisten-URL des Browsers ändern

www.mysite.com/products

zu so etwas 

www.mysite.com/products/{selectedCat}

ohne die Seite zu aktualisieren.
Gibt es eine Art JavaScript-API, mit der ich dies erreichen kann?

url address-bar Luiso
quelle

Antworten:

157

Mit HTML5 können Sie die URL ändern, ohne sie neu zu laden:

Wenn Sie einen neuen Beitrag im Browserverlauf erstellen möchten (dh die Schaltfläche "Zurück" funktioniert)

window.history.pushState('Object', 'Title', '/new-url');

Wenn Sie nur die URL ändern möchten, ohne zurückgehen zu können

window.history.replaceState('Object', 'Title', '/another-new-url');

Das Objekt kann für die Ajax-Navigation verwendet werden:

window.history.pushState({ id: 35 }, 'Viewing item #35', '/item/35');

window.onpopstate = function (e) {
  var id = e.state.id;
  load_item(id);
};

Lesen Sie hier mehr: http://www.w3.org/TR/html5-author/history.html

Eine Fallback-Lösung: https://github.com/browserstate/history.js

Alfred
quelle
4
+1 Beachten Sie auch; diese ändern die pathund / oder query stringin der URL; Sie können das Protokoll, die Domäne oder den Port nicht ändern (da dies ein Sicherheitsproblem wäre, wie andere darauf hingewiesen haben). Die hashobige Funktion kann den Anker (oder die Fragment-ID) ändern
Chris S
2
Ich
Gibt es als Nebenfrage eine Möglichkeit, diese URLs in Google zu indizieren?
Peter Featherstone
1
Eine bessere Bibliothek scheint github.com/browserstate/history.js zu sein. Sie wird aktiv gepflegt und weit verbreitet, während fortes-history.js 3 Jahre lang untätig war.
Gonfi den Tschal
2
Bitte beachten Sie, dass Firefox den Titel nicht unterstützt. Verwenden Sie daher document.title = "neuer Titel".
0fnt
31

Um das zu ergänzen, was die Jungs bereits gesagt haben, bearbeiten Sie die Eigenschaft window.location.hash so, dass sie mit der URL übereinstimmt, die Sie in Ihrer Onclick-Funktion haben möchten.

window.location.hash = 'category-name'; // address bar would become http://example.com/#category-name
Roborourke
quelle
Gibt es eine Möglichkeit, die URL ohne das Symbol '#' in der URL zu ändern?
SHEKHAR SHETE
7

Ich glaube, dass es aus Sicherheitsgründen nicht zulässig ist, die Adressleiste direkt auf eine völlig andere URL zu ändern, ohne zu dieser URL zu wechseln, wenn Sie damit zufrieden sind

www.mysite.com/products/#{selectedCat}

dh ein Link im Ankerstil auf derselben Seite, dann schauen Sie sich die verschiedenen Verlaufs- / "Zurück-Schaltfläche" -Skripte an, die jetzt in den meisten Javascript-Bibliotheken vorhanden sind.

Die Erwähnung des Update-Panels lässt mich vermuten, dass Sie asp.net verwenden. In diesem Fall ist die Ajax-Verlaufssteuerung von asp.net ein guter Ausgangspunkt

Justin Wignall
quelle
3

Ich denke nicht, dass dies möglich ist (zumindest das Wechseln zu einer völlig anderen Adresse), da dies ein nicht intuitiver Missbrauch der Adressleiste wäre und Phishing-Angriffe fördern könnte.

Galwegisch
quelle
Anstatt unintuitiv zu sein, denke ich, dass Sie das nicht können sollten, weil es für Phishing-Angriffe missbraucht werden könnte. Jedenfalls ist das +1.
OregonGhost
Ja, das ist mir gerade eingefallen. Keine gute Idee. Danke OregonGhost.
Galwegian
1
Ich kann denken , seine mögliche ... Check out Wikimapia ... Wie Sie die Karte der Umgebung ziehen, wird die URL geändert ...
Shivasubramanian A
@ Shivasubramanian-a: Ich habe mir Wikimapia angesehen, und tatsächlich verwenden sie nur die von somej vorgeschlagene und von sanchothefat beschriebene Technik: nur den Namen des Ankers ändern. Welches ist sicher gegen Phishing ...
PhiLho
-1

Dies kann nicht so gemacht werden, wie Sie es sagen. Die von somej.net vorgeschlagene Methode ist die nächstgelegene. Im AJAX-Zeitalter ist dies eigentlich sehr üblich. Sogar Google Mail nutzt dies.

aalaap
quelle
-1

"window.location.hash"

wie von sanchothefat vorgeschlagen, sollte der einzige Weg sein, dies zu tun. Da alle Orte, an denen ich diese Funktion gesehen habe, die ganze Zeit nach der # in-URL stehen.


quelle