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

Я пытаюсь удалить все после "?" в браузере URL на документ готов.

Вот что я пытаюсь:

jQuery(document).ready(function($) {

var url = window.location.href;
    url = url.split('?')[0];
});

Я могу сделать это и посмотреть, как работает ниже:

jQuery(document).ready(function($) {

var url = window.location.href;
    alert(url.split('?')[0]);
});

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

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

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

простой способ сделать это, работает на любой странице, требует 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);
   }
}

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

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

если в конце моего 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

Я хотел удалить только один параметр 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)

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

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

Ни одно из этих решений не помогло мне, вот функция, совместимая с 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'])

//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;     
}

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

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

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

В jquery использовать <

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

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

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