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

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

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

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

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

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

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

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

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

 Pointy10 июн. 2012 г., 17:50
Можете ли вы опубликовать ссылку на пример сайта, который динамически обновляет строку запроса? Я не думаю, что это можно сделать, но выможе измените значение хеша, и этого может быть достаточно, чтобы получить то, что вы хотите.
 Quentin10 июн. 2012 г., 17:54
Возможный дубликат Почему новый веб-Dropbox может изменить URL-адрес без обновления страницы? и три вопроса помечены как дубликат
 Sonic Soul10 июн. 2012 г., 17:53
пример добавлен.
 Quentin10 июн. 2012 г., 17:53
 Quentin10 июн. 2012 г., 17:52

Ответы на вопрос(5)

Решение Вопроса

ваше решение работает нормально. Однако, если вы хотите изменить запрос, вы можете использовать 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.htm

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

 Allan Baptista21 янв. 2018 г., 03:24
в современных браузерах вы можете просто:if (window.history.pushState) { const newURL = new URL(window.location.href); newURL.search = '?myNewUrlQuery=1'; window.history.pushState({ path: newURL.href }, '', newURL.href); }
 Garrett20 мар. 2016 г., 23:32
Я думаю, ты можешь сократитьwindow.location.protocol + '//' + window.location.host чтобы просто:window.location.origin.
 Blaskovicz02 нояб. 2016 г., 20:38
Кроме того, для дополнительной информации относительные пути также работают сhistory.pushState(). Нет фактическогоstateргумент @ тоже обязателен. Оба из них означают, что вы можете сделать что-то простое, какhistory.pushState(null, '', '/foo?bar=true') если ваш новый URL находится на том же хосте / порту.
 Blackus25 нояб. 2016 г., 15:06
Обратите внимание, что если вы не хотите, чтобы новое состояние появлялось в истории браузера, вы можете использоватьhistory.replaceState() с такими же аргументами.
 Zhenya24 мая 2017 г., 12:49
USE history.replaceState (), иначе вам нужно дважды нажать кнопку НАЗАД в вашем браузере

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

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

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

 Ian Newson10 июн. 2012 г., 18:48
Метод # хорош тем, что имеет очень широкую поддержку браузера. Ситуация может усложниться, если вам потребуется включить эту информацию в запросы к серверу, так как часть URL не отправляется браузером. Есть способы обойти это, включая библиотеку, на которую я ссылался. Кроме того, использование API истории HTML5 помогает сократить ваши URL в целом и требует меньше работы на стороне клиента для восстановления состояния.
 mirth2324 окт. 2018 г., 06:55
Метод # также проблематичен для обмена в социальных сетях; Twitter, Facebook и, возможно, другие не очень хорошо работают с тегами привязки при создании предварительного просмотра или ссылок на общий ресурс.
 Sonic Soul10 июн. 2012 г., 18:41
отличный. так прямо сейчас .. просто поставив # вместо & при записи в window.location.href, у меня работает. в том, что он не перезагружает страницу. Я уверен, что он сломается, как только я протестирую его в IE. В этот момент я пойду с библиотекой, которую вы предложили. Благодарност
 Sonic Soul10 июн. 2012 г., 18:25
здорово! Вы проверяли это со всеми браузерами ??
 Ian Newson10 июн. 2012 г., 18:28
еализация @My была протестирована в IE7 +, Firefox 3.6+, Safari 5 и Chrome 16+. Вероятно, он работает и с другими браузерами, но у меня не было жалоб на несколько систем, развернутых с его помощью.

которая добавляет пользовательский ключ к строке 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);
    }
}

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

я создал две функции, которые, вероятно, будут полезны всем, кто сталкивается с этим вопросом. С помощью этих двух функций вы можете вызвать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);
    }
}

Ваш ответ на вопрос