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- Метод substituState (), якщо ви хочете оновити / замінити поточний запис історії.
.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
Примітка: як вказав Самуель Liew у коментарях нижче, ця функція була введена лише для HTML5.
Альтернативним підходом було б фактичне перенаправлення вашої сторінки (але ви втратите рядок запиту `? ', Вона все ще потрібна або дані оброблені?).
window.location.href = window.location.href.split("?")[0]; //"http://www.newurl.com";