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

Question

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

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

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

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

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

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

обновление нашли этот метод:

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

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

752 4

jQuery javascript query-string dhtml

4 ответов:

Comments

Ничего не найдено.

Fabio Nolasco · Accepted Answer · 2013-10-09 21:05:05

Если вы ищете модификацию хэша, ваше решение работает нормально. Однако, если вы хотите изменить запрос, вы можете использовать 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 История API.

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

http://diveintohtml5.info/history.html

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

Ian Newson · Accepted Answer · 2015-10-27 21:31:45

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

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

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

эта библиотека существенно полифилл по истории.pushState'.

jmona789 · Accepted Answer · 2018-02-20 18:00:53

отталкиваясь от ответа Фабио, я создал две функции, которые, вероятно, будут полезны для любого, кто наткнется на этот вопрос. С помощью этих двух функций вы можете вызвать insertParam() С ключом и значением в качестве аргумента. Он либо добавит параметр URL, либо, если параметр запроса уже существует с тем же ключом, он изменит этот параметр на новое значение:
//function to remove query params form a url
function removeURLParameter(url, parameter) {
    //prefer 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);
    }
}

chucktator · Accepted Answer · 2012-06-10 18:57:00

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