Website-Suche

javascript - Ändern einer Abfragezeichenfolge, ohne die Seite neu zu laden

Ich erstelle eine Fotogalerie und möchte in der Lage sein, den Abfrage-String und den Titel zu ändern, wenn die Fotos durchgesehen werden.

Das Verhalten, nach dem ich suche, wird häufig bei einigen Implementierungen von kontinuierlichen/unendlichen Seiten gesehen, bei denen beim Scrollen die Abfragezeichenfolge die Seitennummer weiter erhöht (http://x.com?page=4) usw. Dies sollte theoretisch einfach sein, aber ich hätte gerne etwas, das in den wichtigsten Browsern sicher ist.

Ich habe diesen großartigen Beitrag gefunden und versucht, dem Beispiel mit window.history.pushstate zu folgen, aber das funktioniert bei mir anscheinend nicht. Und ich bin mir nicht sicher, ob es ideal ist, weil es mir eigentlich nicht wichtig ist, den Browser-Verlauf zu ändern.

Ich möchte einfach die Möglichkeit bieten, das aktuell angezeigte Foto zu speichern, ohne die Seite jedes Mal neu laden zu müssen, wenn das Foto gewechselt wird.

Hier ist ein Beispiel für eine unendliche Seite, die die Abfragezeichenfolge verändert: http://tumbledry.org/

AKTUALISIERUNG habe diese Methode gefunden:

window.location.href = window.location.href + '#abc';

Antwort #1

Wenn Sie nach einer Hash-Änderung suchen, funktioniert Ihre Lösung in Ordnung. Wenn Sie jedoch die Abfrage ändern möchten, können Sie, wie Sie gesagt haben, pushState verwenden. Hier ist ein Beispiel, das Ihnen helfen könnte, es richtig zu implementieren. Ich habe es getestet und es hat einwandfrei funktioniert:

if (history.pushState) {
    var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?myNewUrlQuery=1';
    window.history.pushState({path:newurl},'',newurl);
}

Es lädt die Seite nicht neu, sondern erlaubt nur das Ändern der URL-Abfrage. Sie könnten die Protokoll- oder Hostwerte nicht ändern. Und natürlich erfordert es moderne Browser, die die HTML5 History API verarbeiten können.

Für weitere Informationen:

http://diveintohtml5.info/history.html

https://developer.mozilla.org/de/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Antwort #2

Alte Frage, moderne Antwort, um zukünftigen Entwicklern zu helfen; Verwendung der URL-Schnittstelle:

const url = new URL(window.location.href);
url.searchParams.set('key', value);
window.history.pushState(null, '', url.toString());

Dies stellt auch sicher, dass Sie nur den angegebenen Abfrageparameter ändern.

Antwort #3

Ich möchte Fabios Antwort verbessern und eine Funktion erstellen, die einen benutzerdefinierten Schlüssel zur URL-Zeichenkette hinzufügt, ohne die Seite neu zu laden.

 function insertUrlParam(key, value) {
        if (history.pushState) {
            let searchParams = new URLSearchParams(window.location.search);
            searchParams.set(key, value);
            let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + searchParams.toString();
            window.history.pushState({path: newurl}, '', newurl);
        }
    }

// to remove the specific key
export function removeUrlParameter(paramKey) {
  const url = window.location.href
  console.log("url", url)
  var r = new URL(url)
  r.searchParams.delete(paramKey)
  const newUrl = r.href
  console.log("r.href", newUrl)
  window.history.pushState({ path: newUrl }, '', newUrl)
}

Antwort #4

Wenn wir einfach nur den Abfrageparameter aktualisieren wollen, ohne andere Teile der URL zu verändern, ist es nicht nötig, die URL erneut zu erstellen. Das ist, was ich benutze:

const addQueryParam = (key, value) => {
  const url = new URL(window.location.href);
  url.searchParams.set(key, value);
  window.history.pushState({}, '', url.toString());
};

const getQueryParam = (key) => {
  const url = new URL(window.location.href);
  return url.searchParams.get(key) || '';
};

Verwandte Artikel