Atualizando a barra de endereço com o novo URL sem hash ou recarregando a página

645

Eu sonhei com o chrome (canal de desenvolvimento) implementando uma maneira de atualizar a barra de endereços via javascript (o caminho, não o domínio) sem recarregar a página ou eles realmente fizeram isso.

No entanto, não consigo encontrar o artigo que acho que li.

Estou louco ou existe uma maneira de fazer isso (no Chrome)?

ps Não estou falando de window.location.hash, et al. Se o exposto acima, a resposta a esta pergunta será falsa.

David Murdoch
fonte
3
Possível duplicado de modificar o URL sem recarregar a página
Tobias KIENZLER
1
@tobiaskienzler Quando a pergunta foi feita originalmente em 2009, não era possível.
David Murdoch
3
Claro que não. Mas agora é, as perguntas pedem o mesmo. Uma pena que o outro tenha uma resposta desatualizada aceita (por você, eu notei) ... Sabe de uma coisa? Vamos joguete de perto o contrário, ninguém disse que o "original" tem que ser o mais velho, de fato existem precedentes
Tobias KIENZLER
@tobiaskienzler, a outra pergunta não tem uma resposta aceita desatualizada.
David Murdoch
2
@TobiasKienzler é uma pergunta de 6 anos, por que você precisa se preocupar com essa pergunta? Apenas aproveite a resposta incrível e implemente-a na sua aplicação. Por 6 anos, milhares de usuários de SO concordaram que é uma pergunta incrível, por favor, deixe como está.
Imam Assidiqqi

Respostas:

876

Agora você pode fazer isso na maioria dos navegadores "modernos"!

Aqui está o artigo original que li (postado em 10 de julho de 2010): HTML5: Alterando a URL do navegador sem atualizar a página .

Para uma análise mais aprofundada do pushState / replaceState / popstate (também conhecido como HTML5 History API), consulte os documentos MDN .

TL; DR, você pode fazer isso:

window.history.pushState("object or string", "Title", "/new-url");

Veja minha resposta para Modificar o URL sem recarregar a página para obter instruções básicas.

David Murdoch
fonte
3
Ah, a funcionalidade está no WebKit e chegou há alguns meses < bugs.webkit.org/show_bug.cgi?id=36152 >. Bom achado!
oldestlivingboy
6
este é agora usado por github, enquanto a navegação árvore
Valerij
1
@Vprimachenko: Sim. E eles quebram meu botão de volta de vez em quando.
David Murdoch
Agora isso pode ser feito no Chrome, Safari, FF4 + e IE10pp3 +! (Da resposta de David Murdoch a stackoverflow.com/questions/824349/… )
Zach Lysobey
11
Protip: você pode usar caminhos relativos com estas funções, bem como (por exemplo, ../new-urlou ../../new-urleles parecem fazer o que você esperaria no Chrome, pelo menos..
Mahn
157

Alterando apenas o que está depois do hash - navegadores antigos

document.location.hash = 'lookAtMeNow';

Alterando o URL completo. Chrome, Firefox, IE10 +

history.pushState('data to be passed', 'Title of the page', '/test');

A descrição acima adicionará uma nova entrada ao histórico, para que você possa pressionar o botão Voltar para retornar ao estado anterior. Para alterar o URL no local sem adicionar uma nova entrada ao histórico, use

history.replaceState('data to be passed', 'Title of the page', '/test');

Tente executá-los no console agora!

Pawel
fonte
13
replaceStateera exatamente o que eu precisava, obrigado por expandir a resposta original.
Choylton B. Higginbottom
'o domínio e o protocolo devem ser iguais ao original!' isso impede que algum site de pesca altere o URL da barra de endereço.
Rick Rick
3
Você não deve passar um URL absoluto para esta função. Se você o fizer, provavelmente precisará construí-lo dinamicamente a partir do esquema, host e porta atuais - o que é bastante trabalhoso quando você pode torná-lo um URL relativo ("foo.html" ou mesmo "/foo.html ") e deixe o navegador cuidar disso.
DimeCadmium
1
@DimeCadmium simplificação agradável. Atualizada.
Pawel
history.replaceStateadicionar ao histórico em ff 66.0b1
azzamsa
33

A atualização da Davids responde até mesmo para detectar navegadores que não oferecem suporte ao pushstate:

if (history.pushState) {
  window.history.pushState("object or string", "Title", "/new-url");
} else {
  document.location.href = "/new-url";
}
metamagikum
fonte
9
document.location.href recarrega a página
paullb
1
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?foo=bar';
window.history.pushState({path:newurl},'',newurl);
Kevin Mendez
fonte
3
Embora esse trecho de código possa resolver a questão, incluir uma explicação realmente ajuda a melhorar a qualidade da sua postagem. Lembre-se de que você está respondendo à pergunta dos leitores no futuro e essas pessoas podem não saber os motivos da sua sugestão de código.
MaxiMouse
@ MaxiMouse obrigado pela sua sugestão, vou ter em mente.
Kevin Mendez