Como posso alterar o URL atual?

100

Eu tenho o seguinte código que altera as páginas de dentro do JavaScript:

var newUrl = [some code to build up URL string];
window.location.replace(newUrl);

Mas isso não muda o URL principal, então, quando alguém clica no botão Voltar, ele não volta para a página anterior.

Como posso fazer com que o JavaScript altere o URL superior também para que o botão Voltar do navegador funcione.

javascript Leora
fonte

Respostas:

38

Atribuição simples window.locationou window.location.hrefdeve ser adequada:

window.location = newUrl;

No entanto, seu novo URL fará com que o navegador carregue a nova página, mas parece que você gostaria de modificar o URL sem sair da página atual. Você tem duas opções para isso:

  1. Use o hash de URL. Por exemplo, você pode ir de example.compara example.com#foosem carregar uma nova página. Você pode simplesmente configurar window.location.hashpara tornar isso mais fácil. Em seguida, você deve ouvir o hashchangeevento HTML5 , que será disparado quando o usuário pressionar o botão Voltar. Isso não é compatível com versões anteriores do IE, mas verifique o jQuery BBQ , que faz com que funcione em todos os navegadores.

  2. Você pode usar o histórico HTML5 para modificar o caminho sem recarregar a página. Isso permitirá que você mude de example.com/foopara example.com/bar. Usar isso é fácil:

    window.history.pushState("example.com/foo");

    Quando o usuário pressiona "voltar", você receberá o popstateevento da janela , que pode ser facilmente ouvido (jQuery):

    $(window).bind("popstate", function(e) { alert("location changed"); });

    Infelizmente, isso só é compatível com navegadores muito modernos, como Chrome, Safari e Firefox 4 beta.

bcherry
fonte
o método .replace em strings não mudará a string a que foi aplicado, ele irá gerar uma nova string. " - o window.location.replace()método não é o mesmo que o String.prototype.replace()método porque window.locationnão é uma string (é um objeto). window.location.replace()substitui o atual URL por um novo, enquanto sobrescreve a entrada do URL antigo no histórico.
Andy E
1
Obrigado pela correção, atualizarei minha resposta de acordo.
bcherry,
2
Olhando para trás, esta é de longe a melhor resposta. document.location.href não tem nada em pushState
buley
7

Hmm, eu usaria

window.location = 'http://localhost/index.html#?options=go_here';

Não tenho certeza se é isso que você quer dizer.

Liquidificador
fonte
7

Se você quiser apenas atualizar o caminho relativo, você também pode fazer

window.location.pathname = '/relative-link'

"http://domain.com" -> "http://domain.com/relative-link"

Artokun
fonte
0 
<script> 
    var url= "http://www.google.com"; 
    window.location = url; 
</script>
user3230794
fonte