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

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

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

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

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

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

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

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

демо что я сделал до сих пор. Ваши ответы будут очень признательны.

14
html5 html5-history javascript jquery pushstate

2 ответов

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

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

или 

window.history.replaceState(null, null, "/another-new-url");
38

Если кто-то хочет добавить параметр в более сложный 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);

надеюсь, что это помогает!

4