Modyfikowanie ciągu zapytania bez ponownego ładowania strony

Tworzę galerię zdjęć i chciałbym mieć możliwość zmiany ciągu zapytania i tytułu podczas przeglądania zdjęć.

Zachowanie, którego szukam, jest często widoczne w niektórych implementacjach ciągłej / nieskończonej strony, gdzie podczas przewijania ciągu zapytania w dół ciąg zapytania zwiększa numer strony ( http://x.com?page=4 ) itd. Tak powinno być w teorii proste, ale chciałbym czegoś, co jest bezpieczne we wszystkich głównych przeglądarkach.

znalazłem ten świetny post i próbowałem podążać za przykładem window.history.pushstate, ale to nie wydaje się działać dla mnie. I nie jestem pewien, czy jest idealny, ponieważ tak naprawdę nie obchodzi mnie modyfikowanie historii przeglądarki.

Chcę tylko móc zaoferować możliwość dodania zakładek do aktualnie oglądanego zdjęcia bez ponownego ładowania strony za każdym razem, gdy zdjęcie jest zmieniane.

Oto przykład nieskończonej strony, która modyfikuje ciąg zapytania: http://tumbledry.org/

UPDATE znalazło tę metodę:

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

wydaje się, że działa dla mnie, ale korzystam z nowego chrome .. prawdopodobnie spowodowałoby to problemy ze starszymi przeglądarkami?

Jeśli szukasz modyfikacji skrótu, Twoje rozwiązanie działa poprawnie. Jeśli jednak chcesz zmienić zapytanie, możesz użyć pushState, jak powiedziałeś. Oto przykład, który może pomóc we właściwym wdrożeniu. Przetestowałem i działało dobrze:

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

Nie przeładowuje strony, a jedynie umożliwia zmianę zapytania URL. Nie możesz zmienić protokołu ani wartości hosta. I oczywiście, że wymaga nowoczesnych przeglądarek, które potrafią przetwarzać interfejs API historii HTML5.

Po więcej informacji:

http://diveintohtml5.info/history.html

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Opierając się na odpowiedzi Fabio, stworzyłem dwie funkcje, które prawdopodobnie będą przydatne dla każdego, kto natknie się na to pytanie. Dzięki tym dwóm funkcjom możesz wywołać insertParam()z kluczem i wartością jako argumentem. Doda parametr adresu URL lub, jeśli parametr zapytania już istnieje z tym samym kluczem, zmieni ten parametr na nową wartość:

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

Z wielkim sukcesem korzystałem z następującej biblioteki JavaScript:

https://github.com/balupton/jquery-history

Obsługuje interfejs API historii HTML5, a także metodę awaryjną (przy użyciu #) dla starszych przeglądarek.

Ta biblioteka jest w zasadzie wypełnieniem wokół `history.pushState '.

Chcę poprawić odpowiedź Fabio i stworzyć funkcję, która dodaje klucz niestandardowy do ciągu adresu URL bez ponownego ładowania strony.

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

W takim razie API historii jest dokładnie tym, czego szukasz. Jeśli chcesz obsługiwać również starsze przeglądarki, poszukaj biblioteki, która powraca do manipulowania tagiem skrótu adresu URL, jeśli przeglądarka nie zapewnia interfejsu API historii.