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.
javascript
url
html5-history
fragment-identifier
hashchange
Steven Noble
quelle
quelle
pushState
:for(i=1;i<50;i++){var txt="..................................................";txt=txt.slice(0,i)+"HTML5"+txt.slice(i,txt.length);history.pushState({}, "html5", txt);}
Antworten:
Verwenden Sie in HTML 5 die
history.pushState
Funktion . Als Beispiel:und ein href:
Wenn Sie die URL ändern möchten, ohne einen Eintrag zur Liste der Zurück-Schaltflächen hinzuzufügen, verwenden Sie
history.replaceState
stattdessen.quelle
Wenn Sie es an der Arbeit in Browsern wollen , das nicht unterstützen ,
history.pushState
undhistory.popState
doch ist der „alte“ Weg , um die Fragmentbezeichner zu setzen, die nicht eine Seite neu geladen verursachen.Die Grundidee besteht darin, die
window.location.hash
Eigenschaft 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ützenonhashchange
(IE <8, Firefox <3.6), regelmäßig zu überprüfen Überprüfen Sie, ob sich der Hash geändert hat (setInterval
z. 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.
quelle
setInterval
, um das zu inspizieren,document.location.hash
kann man dashashchange
Ereignis verwenden, da es viel mehr angenommen wird. Überprüfen Sie hier, welche Browser die einzelnen Standards unterstützen . Mein aktueller Ansatz ist die Verwendung von Push / PopState in Browsern, die dies unterstützen. Bei den anderen setze ich den Hash und schaue nur denhashchange
in unterstützenden Browsern. Dadurch bleibt IE <= 7 ohne Verlaufsunterstützung, jedoch mit nützlichem Permalink. Aber wen interessiert die IE <= 7-Geschichte?_trackPageview
mit der "echten" URL der neuen Seite aufzurufen .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äß.
quelle
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.]
quelle
history.pushState()
.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.
quelle
jQuery hat ein großartiges Plugin zum Ändern der URL des Browsers, jQuery-pusher .
JavaScript
pushState
und jQuery können zusammen verwendet werden, wie:history.pushState(null, null, $(this).attr('href'));
Beispiel:
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: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.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.
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. AndernfallspushState()
wird eine Ausnahme ausgelöst. Dieser Parameter ist optional. Wenn es nicht angegeben ist, wird es auf die aktuelle URL des Dokuments festgelegt.quelle
Es gibt eine Yahoo YUI-Komponente (Browser History Manager), die dies verarbeiten kann: http://developer.yahoo.com/yui/history/
quelle
Die Fotogalerie von Facebook verwendet dazu ein #hash in der URL. Hier sind einige Beispiel-URLs:
Bevor Sie auf "Weiter" klicken:
Nach dem Klicken auf "Weiter":
Beachten Sie den Hash-Bang (#!) Unmittelbar gefolgt von der neuen URL.
quelle
Es gibt ein JQuery-Plugin http://www.asual.com/jquery/address/
Ich denke, das ist was du brauchst.
quelle
Was für mich
history.replaceState()
funktioniert , ist - Funktion, die wie folgt ist -Dadurch wird die Seite nicht neu geladen. Sie können sie mit Javascript verwenden
quelle
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 zulassenlocation.append = new.html
und die Seite wird:http://domain.com/site/page.htmlnew.html
und 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=1
und 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
div
verwendet wird, um unterschiedliche Methodenüberstunden zu verarbeiten, werden diese Daten nicht für jeden Verlaufsstatus gespeichert.quelle
Mein Code ist:
und Aktion:
und Beispiel
Das ist alles :)
quelle
Eine einfachere Antwort, die ich präsentiere,
Dies wird
/abc
nach 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 ".quelle
Ich hatte Erfolg mit:
Es wird nur
#myValue
zur aktuellen URL hinzugefügt. Wenn Sie ein Ereignis auf Seite Laden auslösen müssen, können Sie damitlocation.hash
den relevanten Wert überprüfen. Denken Sie daran,#
den Wert aus dem vonlocation.hash
zquelle