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