Ändern einer Abfragezeichenfolge ohne Neuladen der Seite

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, wird häufig bei einigen Implementierungen von kontinuierlichen/unendlichen Seiten beobachtet, bei denen die Abfragezeichenfolge beim Herunterscrollen die Seitenzahl erhöht (http://x.com?page=4) usw.. Das sollte theoretisch einfach sein, aber ich hätte gerne 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 bei mir 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 laden zu müssen, wenn das Foto geändert wird.

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

AKTUALISIEREN habe diese Methode gefunden:

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

Wenn Sie nach einer Hash-Modifikation suchen, funktioniert Ihre Lösung einwandfrei. Wenn Sie jedoch die Abfrage ändern möchten, können Sie den PushState verwenden, wie Sie sagten. Hier ist ein Beispiel, das Ihnen helfen könnte, es richtig zu implementieren. Ich habe es getestet und es hat gut 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 ermöglicht Ihnen nur, die URL-Abfrage zu ändern. Sie könnten das Protokoll oder die Hostwerte nicht ändern. Und natürlich, dass es moderne Browser braucht, die HTML5 History 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

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.

 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)
}

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 anrufen insertParam() mit einem Schlüssel und Wert als Argument. Es fügt entweder den URL-Parameter hinzu oder, wenn bereits ein Abfrageparameter mit demselben Schlüssel vorhanden ist, ändert es diesen Parameter auf den neuen Wert:

//function to remove query params from a URL
function removeURLParameter(url, parameter) {
    //better to use l.search if you have a location/link object
    var urlparts= url.split('?');   
    if (urlparts.length>=2) {

        var prefix= encodeURIComponent(parameter)+'=';
        var pars= urlparts[1].split(/[&;]/g);

        //reverse iteration as may be destructive
        for (var i= pars.length; i-- > 0;) {    
            //idiom for string.startsWith
            if (pars[i].lastIndexOf(prefix, 0) !== -1) {  
                pars.splice(i, 1);
            }
        }

        url= urlparts[0] + (pars.length > 0 ? '?' + pars.join('&') : "");
        return url;
    } else {
        return url;
    }
}

//function to add/update query params
function insertParam(key, value) {
    if (history.pushState) {
        // var newurl = window.location.protocol + "//" + window.location.host + search.pathname + '?myNewUrlQuery=1';
        var currentUrlWithOutHash = window.location.origin + window.location.pathname + window.location.search;
        var hash = window.location.hash
        //remove any param for the same key
        var currentUrlWithOutHash = removeURLParameter(currentUrlWithOutHash, key);

        //figure out if we need to add the param with a ? or a &
        var queryStart;
        if(currentUrlWithOutHash.indexOf('?') !== -1){
            queryStart="&";
        } else {
            queryStart="?";
        }

        var newurl = currentUrlWithOutHash + queryStart + key + '=' + value + hash
        window.history.pushState({path:newurl},'',newurl);
    }
}

Ich 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 (mithilfe von #) für ältere Browser.

Diese Bibliothek ist im Wesentlichen ein Polyfill um `history.pushState’ herum.

Da jeder, der darauf antwortet, den Hash zu vergessen scheint, möchte ich den Code hinzufügen, den ich verwende, um ihn zu behalten alle URL-Parameter:

const urlParams = new URLSearchParams(window.location.search);

/// Change some part of the URL params

if (history.pushState) {
  const newurl =
    window.location.protocol +
    "//" +
    window.location.host +
    window.location.pathname +
    "?" +
    urlParams.toString() +
    window.location.hash;
  window.history.replaceState({ path: newurl }, "", newurl);
} else {
  window.location.search = urlParams.toString();
}

Wenn wir einfach den Abfrageparameter aktualisieren möchten, ohne andere Teile der URL zu berühren, besteht keine Notwendigkeit, die URL erneut zu erstellen. Das verwende ich:

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) || '';
};

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

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

Damit stellen Sie sicher, dass Sie wirklich nur den gewünschten Query-Parameter ändern.