Удаление параметров URL без обновления страницы

TL; DR

чтобы изменить текущий URL и добавить его (новый измененный URL) в качестве нового URL-адреса для записей истории используйте pushState:

window.history.pushState({}, document.title, "/" + "my-new-url.html");

чтобы заменить текущий URL без добавления его в записи истории, используйте replaceState:

window.history.replaceState({}, document.title, "/" + "my-new-url.html");

в зависимости от вашей бизнес-логики 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 () если вы хотите чтобы обновить/заменить настоящее запись истории.

history.replaceState() работает точно так же, как history.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";

---