Remova os parâmetros de URL sem atualizar a página

Estou tentando remover tudo após o "?" no URL do navegador no documento pronto.

Aqui está o que estou tentando:

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

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

Eu posso fazer isso e vê-lo abaixo funciona:

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

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

TL; DR

1- Para modificar URL atual e adicionar / Inject -lo (o novo URL modificado) como uma nova entrada URL à lista história, uso pushState:

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

2- Para substituir o URL atual sem adicioná- lo às entradas do histórico, use replaceState:

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

3- Dependendo da sua lógica de negócios , pushStateserá útil em casos como:

• você deseja apoiar o botão voltar do navegador

• você deseja criar um novo URL, adicionar / inserir / enviar o novo URL às entradas do histórico e torná-lo atual

• permitindo aos usuários marcar a página com os mesmos parâmetros (para mostrar o mesmo conteúdo)

• acessar programaticamente os dados através da stateObjanálise a partir da âncora

Como entendi pelo seu comentário, você deseja limpar seu URL sem redirecionar novamente.

Observe que você não pode alterar o URL inteiro. Você pode simplesmente mudar o que vem depois do nome do domínio. Isso significa que você não pode mudar, www.example.com/mas pode mudar o que vem depois.com/

www.example.com/old-page-name => can become =>  www.example.com/myNewPaage20180322.php

fundo

Podemos usar:

1- O método pushState () se você deseja adicionar um novo URL modificado às entradas do histórico.

2- O método replaceState () se você deseja atualizar / substituir a entrada do histórico atual .

.replaceState()opera exatamente como .pushState()exceto que .replaceState() modifica a entrada do histórico atual em vez de criar uma nova. Observe que isso não impede a criação de uma nova entrada no histórico global do navegador.

---

.replaceState()é particularmente útil quando você deseja atualizar o URL ou o objeto de estado da entrada do histórico atual em resposta a alguma ação do usuário.

Código

Para fazer isso, usarei o método pushState () neste exemplo, que funciona de maneira semelhante ao seguinte formato:

var myNewURL = "my-new-URL.php";//the new URL
window.history.pushState("object or string", "Title", "/" + myNewURL );

Sinta-se livre para substituir pushStatecom replaceStatebase em suas necessidades.

Você pode substituir o parâmetro "object or string"por {}e "Title"com, document.titlepara que a declaração final se torne:

window.history.pushState({}, document.title, "/" + myNewURL );

Resultados

As duas linhas de código anteriores criarão uma URL como:

https://domain.tld/some/randome/url/which/will/be/deleted/

Tornar-se:

https://domain.tld/my-new-url.php

Açao

Agora vamos tentar uma abordagem diferente. Digamos que você precise manter o nome do arquivo. O nome do arquivo vem após o último /e antes da string de consulta ?.

http://www.someDomain.com/really/long/address/keepThisLastOne.php?name=john

Será:

http://www.someDomain.com/keepThisLastOne.php

Algo assim fará com que funcione:

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

ATUALIZAR:

Para os fãs de um liner, tente isso no console / firebug e o URL desta página será alterado:

    window.history.pushState("object or string", "Title", "/"+window.location.href.substring(window.location.href.lastIndexOf('/') + 1).split("?")[0]);

O URL desta página será alterado de:

http://stackoverflow.com/questions/22753052/remove-url-parameters-without-refreshing-page/22753103#22753103

Para

http://stackoverflow.com/22753103#22753103

Nota: como Samuel Liew indicou nos comentários abaixo, esse recurso foi introduzido apenas para HTML5.

Uma abordagem alternativa seria realmente redirecionar sua página (mas você perderá a string de consulta `? '', Ela ainda é necessária ou os dados foram processados?).

window.location.href =  window.location.href.split("?")[0]; //"http://www.newurl.com";

Tudo isso é enganoso, você nunca deseja adicionar ao histórico do navegador, a menos que queira ir para uma página diferente em um aplicativo de página única. Se você deseja remover os parâmetros sem alterar a página, use:

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

uma maneira simples de fazer isso, funciona em qualquer página, requer 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);
   }
}

Eu acredito que o melhor e mais simples método para isso é:

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

se eu tiver uma tag especial no final do meu URL, como: http://domain.com/?tag=12345 Aqui está o código abaixo para remover essa tag sempre que ela aparecer na 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>

Isso dá a idéia de remover um ou mais (ou todos) parâmetros do URL

Com window.location.pathname, você basicamente obtém tudo antes de '?' no URL.

var nome do caminho = window.location.pathname; // Retorna apenas o caminho

var url = window.location.href; // Retorna o URL completo

Eu queria remover apenas um parâmetro success. Veja como você pode fazer isso:

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

Isso também mantém #hash.

URLSearchParamsnão funcionará no IE, mas está sendo trabalhado no Edge . Você pode usar um polyfill ou poderia usar uma função auxiliar ingênua para suporte do 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}
}

Isso pode ser usado como:

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

Melhor solução:

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

Nenhuma dessas soluções realmente funcionou para mim, aqui está uma função compatível com IE11 que também pode remover vários parâmetros:

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

Para limpar todos os parâmetros, sem fazer uma atualização da página, E se você estiver usando HTML5, poderá fazer o seguinte:

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

Isso adicionará uma entrada no histórico do navegador. Você também pode considerar replaceStatese não deseja adicionar uma nova entrada e apenas deseja substituir a entrada antiga.

No jquery use <

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

Aqui está um liner para o ES6 que preserva o hash do local e não polui o histórico do navegador usando replaceState:

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