Добавление параметра к URL без обновления

Я знаю, что об этом уже много раз спрашивали, но ответы не были достаточно описательными, чтобы решить мою проблему. Я не хочу менять весь URL-адрес страницы. Я хочу добавить параметр &item=brand при нажатии кнопки без обновления.

Использование document.location.search += '&item=brand'; приводит к обновлению страницы.

Использование window.location.hash = "&item=brand"; добавления без обновления, но с хешем #, который исключает использование / эффект параметра. Я попытался удалить хеш после добавления, но это не сработало.

Этот ответ и многие другие предлагают использовать API истории HTML5, в частности метод history.pushState, а для старых браузеров - установить идентификатор фрагмента для предотвращения перезагрузки страницы. Но как?

Предполагается, что URL-адрес: http://example.com/search.php?lang=en

Как я могу добавить &item=brand с помощью метода HTML5 pushState или идентификатора фрагмента, чтобы результат был таким: http://example.com/search.php?lang=en&item=brand без обновления страницы?

Я надеюсь, что кто-то сможет пролить свет на то, как использовать HTML5 pushState для добавления параметра к существующему / текущему URL-адресу. Или, альтернативно, как установить идентификатор фрагмента для той же цели. Хорошее руководство, демонстрация или фрагмент кода с небольшим объяснением было бы замечательно.

Демонстрация того, что я сделал до сих пор. Будем признательны за ваши ответы.


javascript html jquery pushstate html5-history
person Mina Hafzalla    schedule 28.09.2015    source источник

Ответы (4)


arrow_upward
122
arrow_downward

Вы можете использовать pushState или replaceState, то есть:

window.history.pushState("object or string", "Title", "new url");

OR

window.history.replaceState(null, null, "?arg=123");

Пример с аргументом:

var refresh = window.location.protocol + "//" + window.location.host + window.location.pathname + '?arg=1';    
window.history.pushState({ path: refresh }, '', refresh);
person Pedro Lobito    schedule 28.09.2015
comment
Большое спасибо! это сработало, но, к удивлению, этот параметр не применялся в системе. Однако он вступает в силу, когда я добавляю его вручную в URL-адрес. Я приму это как принятый ответ, поскольку он решает мой главный вопрос, но, пожалуйста, если у вас есть предложение о том, почему параметр не будет применяться к системе при добавлении с использованием history.pushState, сообщите мне :) Еще раз спасибо. - person Mina Hafzalla; 28.09.2015
comment
Спасибо, в итоге я использовал window.history.replaceState (null, null,? Mock); Чтобы добавить параметр URL без перезагрузки. - person rustycode; 19.10.2017
comment
Совместимость браузера несколько хороша, но учтите, что она не будет работать с IE10 ниже или (потенциально) некоторые мобильные браузеры. - person Redwolf Programs; 24.09.2020

arrow_upward
25
arrow_downward

Если кто-то хочет добавить параметр к более сложному URL-адресу (я имею в виду, https://stackoverflow.com/questions/edit?newParameter=1), у меня работал следующий код:

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

Надеюсь это поможет!

person pablobascones    schedule 05.04.2018
comment
вот ссылка на этот рабочий код. eureka.ykyuen .info / 2015/04/08 / - person Hasan Badshah; 19.03.2019
comment
Я также добавляю window.location.hash в конец нового URL-адреса. - person Andre; 08.04.2020

arrow_upward
9
arrow_downward

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

const url = new URL(window.location.href);
url.searchParams.set('param1', 'val1');
url.searchParams.delete('param2');
window.history.replaceState(null, null, url); // or pushState
person Yarrow    schedule 25.12.2020

arrow_upward
0
arrow_downward

Измененный ответ Medhi, и это помогло

const insertParam = (key: string, value: string) => {
    key = encodeURIComponent(key);
    value = encodeURIComponent(value);

    let kvp = window.location.search.substr(1).split('&');
    if (kvp[0] === '') {
        const path = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + key + '=' + value;
        window.history.pushState({ path: path }, '', path);

    } else {
        let i = kvp.length; let x; while (i--) {
            x = kvp[i].split('=');

            if (x[0] === key) {
                x[1] = value;
                kvp[i] = x.join('=');
                break;
            }
        }

        if (i < 0) { 
            kvp[kvp.length] = [key, value].join('=');
        }

        const refresh = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + kvp.join('&');  
        window.history.pushState({ path: refresh }, '', refresh);
    }
}
person Banobe Pascal    schedule 19.05.2021