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

165

document.location.href = newUrl;

https://developer.mozilla.org/en-US/docs/Web/API/document.location

— glebm
fonte

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:

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.
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