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.

javascript ajax google-chrome

— 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

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