it-swarm.com.de

Ändern Sie die URL im Browser, ohne die neue Seite mit JavaScript zu laden

Wie würde ich eine JavaScript - Aktion haben, die Auswirkungen auf die aktuelle Seite haben kann, aber auch die URL im Browser ändern würde. Wenn also der Benutzer auf "Neu laden" oder ein Lesezeichen setzt, wird die neue URL verwendet. 

Es wäre auch schön, wenn die Zurück-Schaltfläche die ursprüngliche URL neu laden würde.

Ich versuche, den JavaScript-Status in der URL aufzuzeichnen.

291
Steven Noble

Wenn Sie möchten, dass es in Browsern funktioniert, die history.pushState und history.popState noch nicht unterstützen, besteht die "alte" Methode darin, die Fragment-ID festzulegen. Dies führt nicht zu einem erneuten Laden der Seite.

Die Grundidee besteht darin, die window.location.hash-Eigenschaft auf einen Wert zu setzen, der die Statusinformationen enthält, die Sie benötigen, und dann entweder das window.onhashchange -Ereignis oder für ältere Browser, die onhashchange nicht unterstützen (IE <8, Firefox < 3.6), überprüfen Sie regelmäßig, ob sich der Hash geändert hat (z. B. setInterval), und aktualisieren Sie die Seite. Sie müssen auch den Hashwert beim Laden der Seite überprüfen, um den ursprünglichen Inhalt einzurichten.

Wenn Sie jQuery verwenden, gibt es ein hashchange-Plugin , das die vom Browser unterstützte Methode verwendet. Ich bin mir sicher, dass es auch Plugins für andere Bibliotheken gibt.

Eine Sache, auf die Sie achten sollten, ist die Kollision mit IDs auf der Seite, da der Browser zu jedem Element mit einer übereinstimmenden ID blättert.

187
Matthew Crumley

Verwenden Sie in HTML 5 die Funktion history.pushState . Als Beispiel:

<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

und ein href:

<a href="#" id='click'>Click to change url to bar.html</a>

Wenn Sie die URL ändern möchten, ohne einen Eintrag zur Liste der hinteren Schaltflächen hinzuzufügen, verwenden Sie stattdessen history.replaceState.

111
clu3

window.location.href enthält die aktuelle URL. Sie können aus ihm lesen, Sie können anhängen und Sie können ihn ersetzen, was zu einem erneuten Laden der Seite führen kann.

Wenn Sie, wie es sich anhört, den Javascript-Status in der URL aufzeichnen möchten, damit er mit einem Lesezeichen versehen werden kann, ohne die Seite neu zu laden, fügen Sie ihn nach einem # an die aktuelle URL an und lassen Sie ein Stück Javascript aus, das durch das Onload-Ereignis ausgelöst wird URL, um zu sehen, ob es einen gespeicherten Status enthält.

Wenn du ein? Anstelle eines # erzwingen Sie ein Neuladen der Seite. Da Sie jedoch den gespeicherten Zustand beim Laden analysieren, ist dies möglicherweise kein Problem. Dadurch werden die Vorwärts- und Zurück-Tasten ebenfalls korrekt ausgeführt.

37
moonshadow

Ich würde stark vermuten, dass dies nicht möglich ist, weil es ein unglaubliches Sicherheitsproblem wäre, wenn es wäre. Zum Beispiel könnte ich eine Seite erstellen, die aussieht wie eine Bankanmeldeseite, und die URL in der Adressleiste genauso aussehen lassen wie die echte Bank !

Wenn Sie erklären, warum Sie dies tun möchten, können die Leute möglicherweise alternative Ansätze vorschlagen ...

[Bearbeiten im Jahr 2011: Seit ich diese Antwort im Jahr 2008 geschrieben habe, gibt es mehr Informationen zu einer HTML5-Technik , mit der die URL so lange geändert werden kann, wie sie ist ist vom selben Ursprung]

21
Paul Dixon

jQuery hat ein großartiges Plugin zum Ändern der Browser-URL, genannt jQuery-pusher.

JavaScript pushState und jQuery können zusammen verwendet werden, wie zum Beispiel:

history.pushState(null, null, $(this).attr('href'));

Beispiel:

$('a').click(function (event) {

  // Prevent default click action
  event.preventDefault();     

  // Detect if pushState is available
  if(history.pushState) {
    history.pushState(null, null, $(this).attr('href'));
  }
  return false;
});


Verwenden Sie nur JavaScript history.pushState(), wodurch der Verweis geändert wird, der im HTTP-Header für XMLHttpRequest-Objekte verwendet wird, die nach dem Ändern des Status erstellt wurden.

Beispiel:

window.history.pushState("object", "Your New Title", "/new-url");

Die pushState () -Methode:

pushState() akzeptiert drei Parameter: ein Statusobjekt, einen Titel (der derzeit ignoriert wird) und (optional) eine URL. Lassen Sie uns jeden dieser drei Parameter genauer untersuchen:

  1. Statusobjekt - Das Statusobjekt ist ein JavaScript-Objekt, das dem neuen Verlaufseintrag zugeordnet ist, der von pushState() erstellt wurde. Immer wenn der Benutzer zu dem neuen Status navigiert, wird ein Popstate-Ereignis ausgelöst, und die Statuseigenschaft des Ereignisses enthält eine Kopie des Statusobjekts des Verlaufseintrags.

    Das Statusobjekt kann alles sein, was serialisiert werden kann. Da Firefox Statusobjekte auf der Festplatte des Benutzers speichert, damit sie nach dem Neustart des Browsers wiederhergestellt werden können, wird der serialisierten Darstellung eines Statusobjekts eine Größenbeschränkung von 640.000 Zeichen auferlegt. Wenn Sie ein Statusobjekt, dessen serialisierte Darstellung größer als dieses ist, an pushState() übergeben, löst die Methode eine Ausnahme aus. Wenn Sie mehr Speicherplatz benötigen, sollten Sie sessionStorage und/oder localStorage verwenden.

  2. title - Firefox ignoriert diesen Parameter derzeit, obwohl er ihn möglicherweise in Zukunft verwendet. Das Übergeben der leeren Zeichenfolge hier sollte vor zukünftigen Änderungen an der Methode sicher sein. Alternativ können Sie einen kurzen Titel für den Staat übergeben, in den Sie umziehen.

  3. URL - Die URL des neuen Verlaufseintrags wird durch diesen Parameter angegeben. Beachten Sie, dass der Browser nach einem Aufruf von pushState() nicht versucht, diese URL zu laden, aber möglicherweise versucht er, die URL später zu laden, beispielsweise nachdem der Benutzer seinen Browser neu gestartet hat. Die neue URL muss nicht absolut sein. Wenn es relativ ist, wird es relativ zur aktuellen URL aufgelöst. Die neue URL muss denselben Ursprung haben wie die aktuelle URL. Andernfalls löst pushState() eine Ausnahme aus. Dieser Parameter ist optional. Wenn es nicht angegeben ist, wird es auf die aktuelle URL des Dokuments gesetzt.

8
Ilia Rostovtsev

Browser-Sicherheitseinstellungen verhindern, dass Benutzer die angezeigte URL direkt ändern. Sie können sich die Phishing-Schwachstellen vorstellen, die dazu führen könnten.

Die zuverlässigste Möglichkeit, die URL ohne Seitenwechsel zu ändern, ist die Verwendung eines internen Links oder Hashs. Beispiel: http://site.com/page.html wird http://site.com/page.html#item1 . Diese Technik wird häufig in hijax (AJAX + Historie) verwendet. 

Wenn ich dies tue, verwende ich oft nur Links für die Aktionen mit dem Hash als Href und füge dann Click-Events mit Jquery hinzu, die den angeforderten Hash verwenden, um die Aktion zu bestimmen und zu delegieren. 

Ich hoffe, das bringt Sie auf den richtigen Weg. 

8
Jethro Larson

Es gibt eine Yahoo-YUI-Komponente (Browser History Manager), die dies erledigen kann: http://developer.yahoo.com/yui/history/

4
powtac

Die Fotogalerie von Facebook verwendet dazu ein #hash in der URL. Hier einige Beispiel-URLs:

Bevor Sie auf "Weiter" klicken:

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507

Nach dem Klicken auf "Weiter":

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507#!/photo.php?fbid=496435457507&set=a.218088072507.133423.681812507&pid=5887085&id=681812507

Beachten Sie den Hash-Bang (#!) Unmittelbar gefolgt von der neuen URL.

3
Jonathon Hill

Es gibt ein Jquery-Plugin http://www.asual.com/jquery/address/

Ich denke, das ist was du brauchst.

2
Hash

mein Code lautet:

//change address bar
function setLocation(curLoc){
    try {
        history.pushState(null, null, curLoc);
        return false;
    } catch(e) {}
        location.hash = '#' + curLoc;
}

und Aktion:

setLocation('http://example.com/your-url-here');

und Beispiel

$(document).ready(function(){
    $('nav li a').on('click', function(){
        if($(this).hasClass('active')) {

        } else {
            setLocation($(this).attr('href'));
        }
            return false;
    });
});

Das ist alles :)

2
Tusko Trush

Was für mich funktioniert ist - history.replaceState() Funktion, die wie folgt ist - 

history.replaceState(data,"Title of page"[,'url-of-the-page']);

Diese Seite wird nicht neu geladen. Sie können sie bei Javascript verwenden

2
Veshraj Joshi

Ich habe mich gefragt, ob es möglich ist, solange der übergeordnete Pfad auf der Seite derselbe ist und nur etwas Neues hinzugefügt wird.

Der Benutzer ist also auf der Seite: http://domain.com/site/page.html Dann kann der Browser location.append = new.html Ausführen, und die Seite wird zu: http://domain.com/site/page.htmlnew.html, und der Browser ändert sie nicht. 

Oder lassen Sie die Person einfach nur get-Parameter ändern, also location.get = me=1&page=1.

Die Originalseite wird also zu http://domain.com/site/page.html?me=1&page=1 und wird nicht aktualisiert. 

Das Problem mit # ist, dass die Daten nicht zwischengespeichert werden (zumindest glaube ich nicht), wenn Hash geändert wird. Es ist also so, als würde jedes Mal, wenn eine neue Seite geladen wird, die Vor- und Zurück-Schaltflächen auf einer Nicht- Ajax - Seite in der Lage sein, Daten zwischenzuspeichern und brauchen keine Zeit zum erneuten Laden der Daten.

Nach allem, was ich gesehen habe, lädt die Yahoo-Geschichte bereits alle Daten auf einmal. Es scheint keine Ajax-Anfragen zu machen. Wenn eine Variable div verwendet wird, um andere Methoden über die Zeit hinaus zu behandeln, werden diese Daten nicht für jeden Verlaufsstatus gespeichert.

1
user58670

Eine einfachere Antwort, die ich präsentiere,

window.history.pushState(null, null, "/abc")

dadurch wird nach dem Domänennamen /abc in der Browser-URL hinzugefügt. Kopieren Sie einfach diesen Code und fügen Sie ihn in die Browserkonsole ein. Die URL ändert sich in " https://stackoverflow.com/abc ".

0
Samim

Ich hatte Erfolg mit:

location.hash="myValue";

Es fügt einfach #myValue zur aktuellen URL hinzu. Wenn Sie auf Seite Laden ein Ereignis auslösen müssen, können Sie denselben location.hash verwenden, um den entsprechenden Wert zu überprüfen. Denken Sie daran, den # aus dem von location.hash zurückgegebenen Wert zu entfernen, z.

var articleId = window.location.hash.replace("#","");
0
Adam Hey