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

Ответ 1

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 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";

Ответ 2

Все они вводят в заблуждение, вы никогда не хотите добавлять в историю браузера, если вы не хотите перейти на другую страницу в одностраничном приложении. Если вы хотите удалить параметры без изменения страницы, вы должны использовать:

window.history.replaceState(null, null, window.location.pathname);

Ответ 3

простой способ сделать это, работает на любой странице, требует HTML 5

// get the string following the ?
var query = window.location.search.substring(1)

// is there anything there ?
if(query.length) {
   // are the new history methods available ?
   if(window.history != undefined && window.history.pushState != undefined) {
        // if pushstate exists, add a new state to the history, this changes the url without reloading the page

        window.history.pushState({}, document.title, window.location.pathname);
   }
}

Ответ 4

Я считаю, что лучший и простой метод для этого:

var newURL = location.href.split("?")[0];
window.history.pushState('object', document.title, newURL);

Ответ 5

если у меня есть специальный тег в конце моего URL-адреса, например: http://domain.com/?tag=12345 Ниже приведен код для удаления этого тега всякий раз, когда он отображается в URL-адресе:

<script>
// Remove URL Tag Parameter from Address Bar
if (window.parent.location.href.match(/tag=/)){
    if (typeof (history.pushState) != "undefined") {
        var obj = { Title: document.title, Url: window.parent.location.pathname };
        history.pushState(obj, obj.Title, obj.Url);
    } else {
        window.parent.location = window.parent.location.pathname;
    }
}
</script>

Это дает идею удалить один или несколько параметров (или всех) из URL

С window.location.pathname вы в основном получаете все до '?' в URL.

var pathname = window.location.pathname;//Возвращает только путь

var url = window.location.href;//Возвращает полный URL

Ответ 6

Лучшее решение:

window.history.pushState(null, null, window.location.pathname);

Ответ 7

Мне нужно удалить только один параметр success. Вот как вы можете это сделать:

let params = new URLSearchParams(location.search)
params.delete('success')
history.replaceState(null, '', '?' + params + location.hash)

Это также сохраняет #hash.

URLSearchParams не будет работать на IE, но будет работать для Edge. Вы можете использовать polyfill или использовать наивную вспомогательную функцию для поддержки IE:

function take_param(key) {
    var params = new Map(location.search.slice(1).split('&')
        .map(function(p) { return p.split(/=(.*)/) }))   
    var value = params.get(key)
    params.delete(key)
    var search = Array.from(params.entries()).map(
        function(v){ return v[0]+'='+v[1] }).join('&')
    return {search: search ? '?' + search : '', value: value}
}

Это можно использовать как:

history.replaceState(
    null, '', take_param('success').search + location.hash)

Ответ 8

Ни одно из этих решений не помогло мне, вот функция, совместимая с IE11, которая также может удалять несколько параметров:

/**
* Removes URL parameters
* @param removeParams - param array
*/
function removeURLParameters(removeParams) {
  const deleteRegex = new RegExp(removeParams.join('=|') + '=')

  const params = location.search.slice(1).split('&')
  let search = []
  for (let i = 0; i < params.length; i++) if (deleteRegex.test(params[i]) === false) search.push(params[i])

  window.history.replaceState({}, document.title, location.pathname + (search.length ? '?' + search.join('&') : '') + location.hash)
}

removeURLParameters(['param1', 'param2'])

Ответ 9

Чтобы очистить все параметры, не обновляя страницу, И если вы используете HTML5, вы можете сделать это:

history.pushState({}, '', 'index.html' ); //replace 'index.html' with whatever your page name is

Это добавит запись в историю браузера. Вы можете также рассмотреть replaceState, если вы не хотите добавлять новую запись и просто хотите заменить старую запись.

Ответ 10

//Joraid code is working but i altered as below. it will work if your URL contain "?" mark or not
//replace URL in browser
if(window.location.href.indexOf("?") > -1) {
    var newUrl = refineUrl();
    window.history.pushState("object or string", "Title", "/"+newUrl );
}

function refineUrl()
{
    //get full url
    var url = window.location.href;
    //get url after/  
    var value = url = url.slice( 0, url.indexOf('?') );
    //get the part after before ?
    value  = value.replace('@System.Web.Configuration.WebConfigurationManager.AppSettings["BaseURL"]','');  
    return value;     
}

Ответ 11

Вот один один слот ES6, который сохраняет хэш местоположения и не загрязняет историю браузера, используя replaceState:

(l=>{window.history.replaceState({},'',l.pathname+l.hash)})(location)

Ответ 12

В jquery используйте <

window.location.href =  window.location.href.split("?")[0]