Изменение строки запроса без перезагрузки страницы

Я создаю фотогалерею и хочу иметь возможность изменять строку запроса и заголовок при просмотре фотографий.

Поведение, которое я ищу, часто наблюдается в некоторых реализациях непрерывной / бесконечной страницы, где при прокрутке вниз строка запроса продолжает увеличивать номер страницы ( http://x.com?page=4 ) и т. Д. Это должно быть теоретически просто, но я бы хотел что-то безопасное для основных браузеров.

Я нашел этот отличный пост и пытался последовать его примеру window.history.pushstate, но, похоже, мне это не помогло. И я не уверен, что это идеально, потому что меня не особо волнует изменение истории браузера.

Я просто хочу иметь возможность добавлять в закладки просматриваемую в данный момент фотографию, не перезагружая страницу каждый раз при изменении фотографии.

Вот пример бесконечной страницы, изменяющей строку запроса: http://tumbledry.org/

ОБНОВЛЕНИЕ обнаружило этот метод:

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

похоже, это работает для меня, но я использую новый Chrome .. это, вероятно, вызовет некоторые проблемы со старыми браузерами?

Если вы ищете модификацию хэша, ваше решение работает нормально. Однако, если вы хотите изменить запрос, вы можете использовать pushState, как вы сказали. Вот пример, который может помочь вам правильно его реализовать. Я тестировал, и все работало нормально:

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

Он не перезагружает страницу, а только позволяет изменить URL-запрос. Вы не сможете изменить протокол или значения хоста. И, конечно же, для этого требуются современные браузеры, которые могут обрабатывать HTML5 History API.

Чтобы получить больше информации:

http://diveintohtml5.info/history.html

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

Основываясь на ответе Фабио, я создал две функции, которые, вероятно, будут полезны любому, кто наткнется на этот вопрос. С помощью этих двух функций вы можете вызывать insertParam()с ключом и значением в качестве аргумента. Он либо добавит параметр URL, либо, если параметр запроса с таким же ключом уже существует, изменит этот параметр на новое значение:

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

Я с большим успехом использовал следующую библиотеку JavaScript:

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

Он поддерживает API истории HTML5, а также резервный метод (с использованием #) для старых браузеров.

По сути, эта библиотека представляет собой полифил вокруг `history.pushState '.

Я хочу улучшить ответ Фабио и создать функцию, которая добавляет настраиваемый ключ в строку URL без перезагрузки страницы.

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

Тогда API истории - это именно то, что вам нужно. Если вы хотите поддерживать и устаревшие браузеры, поищите библиотеку, которая использует манипуляции с хэш-тегом URL, если браузер не предоставляет API истории.