TL; DR
1- Чтобы изменить текущий URL и добавить / добавить его (новый измененный URL) в качестве новой записи URL в список истории, используйте pushState:
window.history.pushState({}, document.title, "/" + "my-new-url.html");
2- Чтобы заменить текущий URL без добавления его в записи истории, используйте replaceState:
window.history.replaceState({}, document.title, "/" + "my-new-url.html");
3- В зависимости от вашей бизнес-логики , pushStateбудет полезно в таких случаях, как:
Вы хотите поддержать кнопку возврата браузера
Вы хотите создать на новый URL, добавить / вставить / нажать новый URL в истории записей, и сделать его текущим URL
позволяя пользователям делать закладки на странице с одинаковыми параметрами (показывать одинаковое содержимое)
для программного доступа к данным через stateObjсинтаксический анализ с якоря
Как я понял из вашего комментария, вы хотите очистить свой URL без повторного перенаправления.
Обратите внимание, что вы не можете изменить весь URL. Вы можете просто изменить то, что идет после имени домена. Это означает, что вы не можете изменить, www.example.com/но вы можете изменить то, что приходит после.com/
www.example.com/old-page-name => can become => www.example.com/myNewPaage20180322.php
Задний план
Мы можем использовать:
1 - метод pushState (), если вы хотите добавить новый измененный URL-адрес в записи истории.
2 - метод replaceState (), если вы хотите обновить / заменить текущую запись истории.
.replaceState()работает точно так же, .pushState()за исключением того, что .replaceState() изменяет текущую запись истории вместо создания новой. Обратите внимание, что это не мешает созданию новой записи в глобальной истории браузера.
.replaceState()Это особенно полезно, когда вы хотите обновить объект состояния или URL-адрес текущей записи истории в ответ на какое-либо действие пользователя.
Код
Для этого я буду использовать метод pushState () для этого примера, который работает аналогично следующему формату:
var myNewURL = "my-new-URL.php";//the new URL
window.history.pushState("object or string", "Title", "/" + myNewURL );
Вы можете заменить pushStateс replaceStateучетом Ваших пожеланий.
Вы можете заменить параметр Я "object or string"с {}и "Title"с document.titleтаким окончательными Постулатами будут:
window.history.pushState({}, document.title, "/" + myNewURL );
Полученные результаты
Предыдущие две строки кода создадут URL-адрес, такой как:
https://domain.tld/some/randome/url/which/will/be/deleted/
Стать:
https://domain.tld/my-new-url.php
действие
Теперь давайте попробуем другой подход. Скажем, вам нужно сохранить имя файла. Имя файла указывается после последней /и перед строкой запроса ?.
http://www.someDomain.com/really/long/address/keepThisLastOne.php?name=john
Будет:
http://www.someDomain.com/keepThisLastOne.php
Что-то вроде этого заставит это работать:
//fetch new URL
//refineURL() gives you the freedom to alter the URL string based on your needs.
var myNewURL = refineURL();
//here you pass the new URL extension you want to appear after the domains '/'. Note that the previous identifiers or "query string" will be replaced.
window.history.pushState("object or string", "Title", "/" + myNewURL );
//Helper function to extract the URL between the last '/' and before '?'
//If URL is www.example.com/one/two/file.php?user=55 this function will return 'file.php'
//pseudo code: edit to match your URL settings
function refineURL()
{
//get full URL
var currURL= window.location.href; //get current address
//Get the URL between what's after '/' and befor '?'
//1- get URL after'/'
var afterDomain= currURL.substring(currURL.lastIndexOf('/') + 1);
//2- get the part before '?'
var beforeQueryString= afterDomain.split("?")[0];
return beforeQueryString;
}
ОБНОВИТЬ:
Для фанатов одного лайнера, попробуйте это в вашей консоли / firebug, и URL этой страницы изменится:
window.history.pushState("object or string", "Title", "/"+window.location.href.substring(window.location.href.lastIndexOf('/') + 1).split("?")[0]);
URL этой страницы изменится с:
http://stackoverflow.com/questions/22753052/remove-url-parameters-without-refreshing-page/22753103#22753103
к
http://stackoverflow.com/22753103#22753103
Примечание: как отметил Сэмюэл Лью в комментариях ниже, эта функция была введена только для HTML5.
Альтернативный подход заключается в том, чтобы фактически перенаправить вашу страницу (но вы потеряете строку запроса `? ', Она все еще необходима или данные были обработаны?).
window.location.href = window.location.href.split("?")[0]; //"http://www.newurl.com";