Модифікація рядка запиту без перезавантаження сторінки

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

Поведінка, яку я шукаю, часто спостерігається з деякими реалізаціями безперервної / нескінченної сторінки, де під час прокрутки вниз рядок запиту збільшується на номер сторінки ( http://x.com?page=4 ) тощо. Це повинно бути теоретично просто, але я хотів би щось безпечне для основних браузерів.

Я знайшов цю чудову посаду і намагався наслідувати приклад window.history.pushstate, але це, здається, не працює для мене. І я не впевнений, чи ідеально це, бо мені не дуже важливо змінювати історію браузера.

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

Ось приклад нескінченної сторінки, яка змінює рядок запиту: http://tumbledry.org/

UPDATE знайшов цей метод:

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

це, здається, працює для мене, але я перебуваю на новому хромі .. це, мабуть, спричинить деякі проблеми зі старими браузерами?

Якщо ви шукаєте модифікацію 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

Спираючись на відповідь Фабіо, я створив дві функції, які, мабуть, будуть корисні для кожного, хто натрапив на це питання. За допомогою цих двох функцій ви можете зателефонувати 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 історії.