Ich erstelle eine Fotogalerie und möchte die Abfragezeichenfolge und den Titel ändern können, wenn die Fotos durchsucht werden.
Das Verhalten, nach dem ich suche, tritt häufig bei einigen Implementierungen von fortlaufenden / unendlichen Seiten auf, bei denen die Abfragezeichenfolge beim Scrollen nach unten die Seitenzahl ( http://x.com?page=4 ) usw. erhöht . Dies sollte der Fall sein Theoretisch einfach, aber ich möchte etwas, das in allen gängigen Browsern sicher ist.
Ich habe diesen großartigen Beitrag gefunden und versucht, dem Beispiel zu folgen window.history.pushstate
, aber das scheint für mich nicht zu funktionieren. Und ich bin mir nicht sicher, ob es ideal ist, weil es mir nicht wirklich wichtig ist, den Browserverlauf zu ändern.
Ich möchte nur die Möglichkeit bieten, das aktuell angezeigte Foto mit einem Lesezeichen zu versehen, ohne die Seite jedes Mal neu zu laden, wenn das Foto geändert wird.
Hier ist ein Beispiel für eine unendliche Seite, die die Abfragezeichenfolge ändert: http://tumbledry.org/
UPDATE hat diese Methode gefunden:
window.location.href = window.location.href + '#abc';
es scheint für mich zu funktionieren, aber ich bin auf einem neuen Chrom .. es würde wahrscheinlich einige Probleme mit älteren Browsern verursachen?
quelle
:)
Antworten:
Wenn Sie nach einer Hash-Änderung suchen, funktioniert Ihre Lösung einwandfrei. Wenn Sie jedoch die Abfrage ändern möchten, können Sie wie gesagt den pushState verwenden. Hier ist ein Beispiel, das Ihnen bei der ordnungsgemäßen Implementierung helfen kann. Ich habe getestet und es hat gut funktioniert:
Die Seite wird nicht neu geladen, sondern Sie können nur die URL-Abfrage ändern. Sie können das Protokoll oder die Hostwerte nicht ändern. Und natürlich erfordert es moderne Browser, die die HTML5-Verlaufs-API verarbeiten können.
Für mehr Informationen:
http://diveintohtml5.info/history.html
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
quelle
window.location.protocol + '//' + window.location.host
auf nur verkürzen :window.location.origin
.history.pushState()
. Esstate
ist auch kein tatsächliches Argument erforderlich. Beides bedeutet, dass Sie etwas Einfaches tun können,history.pushState(null, '', '/foo?bar=true')
wenn sich Ihre neue URL auf demselben Host / Port befindet.history.replaceState()
mit denselben Argumenten arbeiten können, wenn der neue Status nicht im Browserverlauf angezeigt werden soll .if (window.history.pushState) { const newURL = new URL(window.location.href); newURL.search = '?myNewUrlQuery=1'; window.history.pushState({ path: newURL.href }, '', newURL.href); }
Aufbauend auf Fabios Antwort habe ich zwei Funktionen erstellt, die wahrscheinlich für jeden nützlich sein werden, der über diese Frage stolpert. Mit diesen beiden Funktionen können Sie
insertParam()
mit einem Schlüssel und einem Wert als Argument aufrufen . Entweder wird der URL-Parameter hinzugefügt, oder wenn bereits ein Abfrageparameter mit demselben Schlüssel vorhanden ist, wird dieser Parameter in den neuen Wert geändert:quelle
new URLSearchParams()
mit den nativen Methoden zum Festlegen und Löschen ? In beiden Fällen müssen wir es mithistory.pushState()
new URLSearchParams()
wird von keiner Version von IEIch habe die folgende JavaScript-Bibliothek mit großem Erfolg verwendet:
https://github.com/balupton/jquery-history
Es unterstützt die HTML5-Verlaufs-API sowie eine Fallback-Methode (mit #) für ältere Browser.
Diese Bibliothek ist im Wesentlichen eine Polyfüllung um `history.pushState '.
quelle
Ich möchte Fabios Antwort verbessern und eine Funktion erstellen, die der URL-Zeichenfolge einen benutzerdefinierten Schlüssel hinzufügt, ohne die Seite neu zu laden.
quelle
Dann ist die Verlaufs-API genau das, wonach Sie suchen. Wenn Sie auch ältere Browser unterstützen möchten, suchen Sie nach einer Bibliothek, die auf die Bearbeitung des Hash-Tags der URL zurückgreift, wenn der Browser die Verlaufs-API nicht bereitstellt.
quelle