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

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

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

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

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

Ниже приведен пример бесконечной страницы, которая изменяет строку запроса: http://tumbledry.org/

UPDATE нашел этот метод:

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

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

Ответ 1

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

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

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

Для получения дополнительной информации:

http://diveintohtml5.info/history.html

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

Ответ 2

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

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

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

Эта библиотека по существу является polyfill вокруг `history.pushState '.

Ответ 3

Основываясь на ответе Фабио, я создал две функции, которые, вероятно, будут полезны всем, кто сталкивается с этим вопросом. С помощью этих двух функций вы можете вызывать 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 insertParam(key, value) {
    if (history.pushState) {
        // var newurl = window.location.protocol + "//" + window.location.host + search.pathname + '?myNewUrlQuery=1';
        var currentUrl = window.location.href;
        //remove any param for the same key
        var currentUrl = removeURLParameter(currentUrl, key);

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

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

Ответ 4

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

Ответ 5

Я хочу улучшить ответ Fabio и создать функцию, которая добавляет пользовательский ключ к строке 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);
    }
}