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

Wie hätte ich eine JavaScript- Aktion, die einige Auswirkungen auf die aktuelle Seite haben könnte, aber auch die URL im Browser ändern würde. Wenn der Benutzer auf "Neu laden" oder "Lesezeichen" klickt, wird die neue URL verwendet.

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

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

Verwenden Sie in HTML 5 die history.pushStateFunktion . 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 Zurück-Schaltflächen hinzuzufügen, verwenden Sie history.replaceStatestattdessen.

Wenn Sie es an der Arbeit in Browsern wollen , das nicht unterstützen , history.pushStateund history.popStatedoch ist der „alte“ Weg , um die Fragmentbezeichner zu setzen, die nicht eine Seite neu geladen verursachen.

Die Grundidee besteht darin, die window.location.hashEigenschaft auf einen Wert zu setzen, der alle benötigten Statusinformationen enthält, und dann entweder das Ereignis window.onhashchange zu verwenden oder für ältere Browser, die dies nicht unterstützen onhashchange(IE <8, Firefox <3.6), regelmäßig zu überprüfen Überprüfen Sie, ob sich der Hash geändert hat ( setIntervalz. B. mithilfe von), und aktualisieren Sie die Seite. Sie müssen auch den Hash-Wert 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 passenden ID blättert.

window.location.href enthält die aktuelle URL. Sie können daraus lesen, anhängen und 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, hängen Sie ihn nach einem # an die aktuelle URL an und lassen Sie ein durch das Onload-Ereignis ausgelöstes Javascript den aktuellen analysieren URL, um zu sehen, ob sie den gespeicherten Status enthält.

Wenn Sie eine verwenden? Anstelle eines # erzwingen Sie ein erneutes Laden der Seite. Da Sie jedoch den gespeicherten Status beim Laden analysieren, ist dies möglicherweise kein Problem. Dadurch funktionieren auch die Vorwärts- und Zurück-Tasten ordnungsgemäß.

Ich würde stark vermuten, dass dies nicht möglich ist, da es ein unglaubliches Sicherheitsproblem wäre, wenn es so wäre. Zum Beispiel könnte ich eine Seite erstellen, die wie eine Bank-Anmeldeseite aussieht, 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, sind weitere Informationen zu einer HTML5-Technik bekannt geworden , mit der die URL geändert werden kann, solange sie denselben Ursprung hat.]

Die Browsersicherheitseinstellungen verhindern, dass Personen die angezeigte URL direkt ändern. Sie können sich die Phishing-Schwachstellen vorstellen, die dazu führen würden.

Die einzige Möglichkeit, die URL zu ändern, ohne die Seiten zu ändern, besteht darin, einen internen Link oder Hash zu verwenden. Beispiel: http://site.com/page.html wird zu http://site.com/page.html#item1 . Diese Technik wird häufig bei Hijax angewendet (AJAX + Geschichte bewahren).

Dabei verwende ich häufig nur Links für die Aktionen mit dem Hash als href und füge dann Klickereignisse 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.

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

JavaScript pushStateund jQuery können zusammen verwendet werden, wie:

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() , das den Referrer ändert, 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()Es werden drei Parameter verwendet: ein Statusobjekt, ein 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 erstellt wurde pushState(). Immer wenn der Benutzer zum 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 übergeben, dessen serialisierte Darstellung größer als dieses ist pushState(), 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 möglicherweise in Zukunft verwendet wird. Das Übergeben der leeren Zeichenfolge sollte vor zukünftigen Änderungen an der Methode sicher sein. Alternativ können Sie einen kurzen Titel für den Status übergeben, in den Sie wechseln.

3. URL - Die URL des neuen Verlaufseintrags wird durch diesen Parameter angegeben. Beachten Sie, dass der Browser nicht versucht, diese URL nach einem Aufruf von pushState()zu laden, sondern möglicherweise versucht, die URL später zu laden, z. B. 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 pushState()wird eine Ausnahme ausgelöst. Dieser Parameter ist optional. Wenn es nicht angegeben ist, wird es auf die aktuelle URL des Dokuments festgelegt.

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

Die Fotogalerie von Facebook verwendet dazu ein #hash in der URL. Hier sind 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.

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

Ich denke, das ist was du brauchst.

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

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

Dadurch wird die Seite nicht neu geladen. Sie können sie mit Javascript verwenden

Ich habe mich gefragt, ob dies möglich ist, solange der übergeordnete Pfad auf der Seite identisch ist. Es wird nur etwas Neues angehängt.

Nehmen wir also an, der Benutzer befindet sich auf der Seite: http://domain.com/site/page.html Dann kann der Browser dies zulassen location.append = new.html und die Seite wird: http://domain.com/site/page.htmlnew.htmlund der Browser ändert sie nicht.

Oder erlauben Sie der Person einfach, den Parameter get zu ändern location.get = me=1&page=1.

So wird die Originalseite http://domain.com/site/page.html?me=1&page=1und sie wird nicht aktualisiert.

Das Problem mit # ist, dass die Daten nicht zwischengespeichert werden (zumindest glaube ich nicht), wenn der Hash geändert wird. Es ist also so, als ob jedes Mal, wenn eine neue Seite geladen wird, Schaltflächen zum Zurück- und Weiterleiten auf einer Nicht- Ajax- Seite Daten zwischenspeichern können und keine Zeit für das erneute Laden der Daten aufwenden.

Nach allem, was ich gesehen habe, lädt die Yahoo-Verlaufssache bereits alle Daten auf einmal. Es scheint keine Ajax-Anfragen zu machen. Wenn also a divverwendet wird, um unterschiedliche Methodenüberstunden zu verarbeiten, werden diese Daten nicht für jeden Verlaufsstatus gespeichert.

Mein Code ist:

//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 :)

Eine einfachere Antwort, die ich präsentiere,

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

Dies wird /abcnach dem Domainnamen 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 ".

Ich hatte Erfolg mit:

location.hash="myValue";

Es wird nur #myValuezur aktuellen URL hinzugefügt. Wenn Sie ein Ereignis auf Seite Laden auslösen müssen, können Sie damit location.hashden relevanten Wert überprüfen. Denken Sie daran, #den Wert aus dem von location.hashz

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