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

Question

Wie würde ich habe einen JavaScript Aktion, die einige Auswirkungen auf die aktuelle Seite haben, aber würde ändern sich auch die URL in den Browser so, wenn der Benutzer Hits neu laden oder Lesezeichen die neue URL wird verwendet?

Es wäre auch schön, wenn die Zurück-Taste die ursprüngliche URL nachladen würde.

Ich versuche JavaScript Zustand in der URL zu erfassen.

Answer 1

Mit HTML 5, verwenden Sie die history.pushState Funktion . Als ein 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 a href:

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

---

Wenn Sie die URL zu ändern, ohne einen Eintrag in der Zurück-Schaltfläche Liste hinzufügen, verwendet history.replaceState statt.

Answer 2

Wenn Sie es wollen, in Browsern arbeiten, die history.pushState und history.popState noch nicht unterstützen, die „alte“ Art und Weise ist die Fragmentbezeichner zu setzen, die nicht eine Seite neu geladen verursachen.

Die Grundidee ist es, die window.location.hash Eigenschaft auf einen Wert festzulegen, enthält, was Statusinformationen Sie benötigen, dann entweder die window.onhashchange Ereignis oder für ältere Browser, die onhashchange (IE <8, Firefox <3.6) nicht, in regelmäßigen Abständen zu überprüfen, um zu sehen, ob der Hash hat sich geändert (unter Verwendung von setInterval zum Beispiel) unterstützen und aktualisieren Sie die Seite. Sie werden auch den Anfangsgehalt einrichten müssen den Hash-Wert beim Laden der Seite überprüfen.

Wenn Sie jQuery verwenden ist ein hashchange Plugin , die verwenden werden je nachdem, welche Methode der Browser unterstützt. Ich bin sicher, es gibt Plugins für andere Bibliotheken auch.

Eine Sache, vorsichtig zu sein mit Ids auf der Seite kollidiert, weil der Browser mit einer entsprechenden ID zu jedem Elemente bewegen wird.

Answer 3

window.location.href enthält die aktuelle URL. Sie können von ihm lesen, können Sie es anhängen, und man kann es ersetzen, die eine Seite neu geladen verursachen kann.

Wenn, wie es sich anhört, möchten Sie Javascript Zustand in der URL erfassen, so dass es mit Lesezeichen versehen werden kann, ohne die Seite neu zu laden, hängen Sie es an die aktuelle URL nach einem # und haben ein Stück Javascript durch das Onload-Ereignis ausgelöst analysiert die aktuelle URL zu sehen, ob sie gespeichert Zustand enthalten.

Wenn Sie ein verwenden? anstelle eines #, werden Sie einen Reload der Seite erzwingen, aber da Sie den gespeicherten Zustand auf Last analysieren wird dies nicht wirklich ein Problem sein; und dies wird die Vorwärts- und Zurück-Tasten richtig funktionieren auch machen.

Answer 4

Ich würde stark vermuten, dass dies nicht möglich ist, weil es eine unglaubliche Sicherheitsproblem wäre, wenn es ist. Zum Beispiel könnte ich eine Seite machen, die wie eine Bank Login-Seite sah, und die die URL in der Adressleiste aussehen lassen genau wie die reale Bank

Vielleicht, wenn Sie erklären, warum Sie dies tun wollen, Leute könnten in der Lage sein, alternative Ansätze vorschlagen ...

[Bearbeiten im Jahr 2011: Da ich diese Antwort im Jahr 2008 schrieb, weitere Informationen sind gekommen, um Licht in Bezug auf ein HTML5 Technik , dass die URL so lange modifiziert werden kann, wie es aus dem gleichen Ursprung]

Answer 5

Browser-Sicherheitseinstellungen verhindern, dass Menschen direkt die angezeigte URL zu ändern. Sie könnten die Phishing-Schwachstellen vorstellen, dass verursachen würde.

Nur zuverlässige Möglichkeit, die URL zu ändern, ohne Seitenwechsel ist einen internen Link oder Hash zu verwenden. zB: http://site.com/page.html wird http://site.com/page.html#item1 . Diese Technik wird häufig verwendet, in hijax (AJAX + bewahren Geschichte).

Wenn dies zu tun Ich werde oft nur Links kann für die Aktionen mit dem Hash als href, fügen Sie dann Ereignisse klicken mit Jquery, die den angeforderten Hash verwenden, um festzustellen, und die Aktion zu delegieren.

Ich hoffe, dass Sets Sie auf dem richtigen Weg.

Answer 6

jQuery hat eine große Plugin für Browser URL zu ändern, die so genannte jQuery-Pusher .

JavaScript pushState und jQuery zusammen verwendet werden können, 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;
});

Mit nur JavaScript history.pushState(), die den Referrer ändert, die für XMLHttpRequest-Objekte im HTTP-Header verwendet wird erstellt, nachdem Sie den Zustand ändern.

Beispiel:

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

Die pushstate () Methode:

pushState() nimmt drei Parameter: ein Statusobjekt, ein Titel (die zur Zeit ignoriert wird), und (optional) eine URL. Lassen Sie uns jede dieser drei Parameter genauer untersuchen:

1. Statusobjekt - Das Statusobjekt ist ein JavaScript-Objekt, das mit dem neuen Historieneintrag von pushState() erstellt zugeordnet ist. Jedes Mal, wenn der Benutzer auf den neuen Zustand navigiert, ein popstate Ereignis ausgelöst wird, und die Zustand Eigenschaft des Ereignisses enthält eine Kopie des Zustands des Objekts Historieneintrags.

   Der Zustand Objekt kann alles sein, das serialisiert werden kann. Da Firefox Statusobjekte auf die Festplatte des Benutzers gespeichert, so dass sie wieder hergestellt werden, nachdem der Benutzer ihren Browser neu gestartet wird, verhängen wir eine Größenbegrenzung von 640k Zeichen auf der serialisierten Darstellung eines Zustandsobjekts. Wenn Sie ein Statusobjekt, dessen serialisierte Darstellung größer als dies pushState() übergeben, wird die Methode eine Ausnahme werfen. Wenn Sie mehr Platz als diese benötigen, sind Sie aufgefordert, session und / oder local zu verwenden.

2. title - Firefox zur Zeit ignoriert diesen Parameter, obwohl sie es in Zukunft nutzen können. die leere Zeichenkette hier Passing sollte gegen zukünftige Änderungen an der Methode sicher sein. Alternativ können Sie auch einen kurzen Titel für den Staat passieren könnte, an die Sie sich bewegen.

3. URL - Der neue URL des Historieneintrags wird durch diesen Parameter angegeben. Beachten Sie, dass der Browser diese URL nicht nach einem Aufruf zu laden versucht zu pushState(), aber es könnte die URL zu laden versuchen, zum Beispiel später, nachdem der Benutzer ihren Browser neu gestartet. Die neue URL muss nicht absolut sein; wenn es relativ ist, ist es in Bezug auf die aktuelle URL aufgelöst. Die neue URL muss als die aktuelle URL des gleichen Ursprungs sein; andernfalls wird pushState() eine Ausnahme werfen. Dieser Parameter ist optional; wenn es nicht angegeben ist, ist es das Dokuments der aktuellen URL festgelegt.

Answer 7

Es gibt eine Yahoo YUI-Komponente (Browser History Manager), die damit umgehen können: http: // developer.yahoo.com/yui/history/

Answer 8

Facebook-Fotogalerie tut dies eine #hash in der URL. Hier sind einige Beispiel-URLs:

Vor 'next' klicken:

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

Nach einem Klick 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 die Hash-Bang (#!) Sofort von der neuen URL gefolgt.

Answer 9

Es ist ein jQuery-Plugin http://www.asual.com/jquery/address/

Ich denke, das ist das, was Sie brauchen.

Answer 10

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

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

Dies wird nicht neu geladen Seite, können Sie Gebrauch davon mit Fall Javascript machen

Answer 11

Ich frage mich, ob es so lange posible wird als der übergeordnete Pfad in der Seite gleich ist, nur etwas Neues zu angehängt.

So wie wir sagen, dass der Benutzer auf der Seite: http://domain.com/site/page.html Dann kann der Browser mich tun lassen location.append = new.html und die Seite wird: http://domain.com/site/page.htmlnew.html und der Browser es nicht ändern.

oder lassen Sie nur die Person Parameter erhalten ändern, also lassen Sie uns location.get = me=1&page=1.

So ursprüngliche Seite wird http://domain.com/site/page.html?me=1&page=1 und es nicht aktualisiert.

Das Problem mit # ist, dass die Daten nicht im Cache gespeichert werden (zumindest ich glaube nicht), wenn Hash geändert wird. So ist es, wie jedes Mal, wenn eine neue Seite geladen wird, während Rücken- und Vorwärts-Tasten in einem nicht Ajax Seite können Daten zwischenzuspeichern und keine Zeit auf Nachladen der Daten ausgeben.

Von dem, was ich sah, die Yahoo Geschichte Sache lädt bereits alle Daten auf einmal. Es scheint keine Ajax-Anfragen zu tun. Also, wenn ein div verwendet wird, um verschiedene Verfahren, Überstunden zu behandeln, werden diese Daten nicht für jede Geschichte Zustand gespeichert.

Answer 12

ist mein Code:

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

Answer 13

Ich habe Erfolg mit:

location.hash="myValue";

Es kommt noch hinzu, #myValue auf die aktuelle URL. Wenn Sie ein Ereignis auf Seite laden auslösen müssen, können Sie die gleiche location.hash verwenden für den entsprechenden Wert zu überprüfen. Denken Sie daran, die # aus dem Wert von location.hash beispielszurück entfernen.

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

Answer 14

Eine einfache Antwort i präsentieren,

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

Dies wird /abc nach dem Domain-Namen in der Browser-URL hinzufügen. Gerade diesen Code kopieren und in den Browser-Konsole einfügen und die URL sehen Ändern auf „ https://stackoverflow.com/abc “