web-dev-qa-db-pt.com

Como modifico o URL sem recarregar a página?

Existe alguma maneira de modificar o URL da página atual sem recarregar a página?

Eu gostaria de acessar a parte antes the # hash se possível.

Só preciso alterar a parte depois do domínio, por isso não estou violando as políticas de domínio cruzado.

 window.location.href = "www.mysite.com/page2.php";  // Sadly this reloads
2085
Robinicks

Isso agora pode ser feito no Chrome, Safari, Firefox 4+ e Internet Explorer 10pp4 +!

Veja a resposta desta pergunta para mais informações: Atualizando barra de endereços com novo URL sem hash ou recarregando a página

Exemplo:

 function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

Você pode então usar window.onpopstate para detectar a navegação dos botões back/forward:

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

Para uma análise mais aprofundada da manipulação do histórico do navegador, consulte este artigo do MDN .

1817
David Murdoch

O HTML5 introduziu os métodos history.pushState() e history.replaceState() , que permitem adicionar e modificar entradas do histórico, respectivamente.

window.history.pushState('page2', 'Title', '/page2.php');

Leia mais sobre isso de aqui

476
Vivart

Você também pode usar HTML5 replaceState se quiser alterar o URL, mas não quiser adicionar a entrada ao histórico do navegador:

if (window.history.replaceState) {
   //prevents browser from storing history with each change:
   window.history.replaceState(statedata, title, url);
}

Isso "quebraria" a funcionalidade do botão Voltar. Isso pode ser necessário em alguns casos, como em uma galeria de imagens (onde você deseja que o botão voltar retorne à página de índice da galeria, em vez de retornar a cada imagem visualizada), dando a cada imagem seu próprio URL exclusivo.

110
George Filippakos

NOTA: Se você está trabalhando com um navegador HTML5, então você deve ignorar esta resposta. Isso agora é possível, como pode ser visto nas outras respostas.

Não há como modificar o URL no navegador sem recarregar a página. O URL representa a última página carregada. Se você alterá-lo (document.location), ele recarregará a página.

Uma razão óbvia é que você escreve um site em www.mysite.com que se parece com uma página de login do banco. Em seguida, você altera a barra de URL do navegador para informar www.mybank.com. O usuário estará totalmente inconsciente de que está realmente olhando para www.mysite.com.

100
Robin Day
parent.location.hash = "hello";
78
Steve

Aqui está a minha solução (newUrl é o seu novo URL que você deseja substituir pelo atual):

history.pushState({}, null, newUrl);
71
Haimei

O HTML5 replaceState é a resposta, como já mencionado por Vivart e geo1701. No entanto, não é suportado em todos os navegadores/versões. History.js agrupa recursos de estado HTML5 e fornece suporte adicional para navegadores HTML4.

25

Antes do HTML5, podemos usar:

parent.location.hash = "hello";

e:

window.location.replace("http:www.example.com");

Esse método recarregará sua página, mas o HTML5 introduziu a history.pushState(page, caption, replace_url) que não deve recarregar sua página.

21
Shine

Nos navegadores modernos e HTML5 , existe um método chamado pushState na janela history. Isso mudará o URL e o enviará ao histórico sem carregar a página.

Você pode usá-lo assim, vai demorar 3 parâmetros, 1) objeto de estado 2) título e um URL:

window.history.pushState({page: "another"}, "another page", "example.html");

Isso mudará o URL, mas não recarregará a página. Além disso, ele não verifica se a página existe, portanto, se você fizer algum código JavaScript que esteja reagindo à URL, poderá trabalhar com eles dessa maneira.

Também há history.replaceState() que faz exatamente a mesma coisa, exceto que modificará o histórico atual ao invés de criar um novo!

Além disso, você pode criar uma função para verificar se history.pushState existe e, em seguida, continuar com o resto assim:

function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);
  }
}

goTo("another page", "example", 'example.html');

Além disso, você pode alterar o # para <HTML5 browsers, que não recarregará a página. Essa é a maneira que Angular usa para fazer SPA de acordo com a hashtag ...

Mudar # é bem fácil, fazendo assim:

window.location.hash = "example";

E você pode detectá-lo assim:

window.onhashchange = function () {
  console.log("#changed", window.location.hash);
}
20
Alireza

Se o que você está tentando fazer é permitir que os usuários marquem/compartilhem páginas, e você não precisa que seja exatamente o URL correto, e você não está usando âncoras hash para mais nada, então você pode fazer isso em dois partes; você usa o location.hash discutido acima e, em seguida, implementa uma verificação na página inicial, para procurar uma URL com uma âncora hash nela e redirecioná-lo para o resultado subseqüente.

Por exemplo:

1) O usuário está no www.site.com/section/page/4

2) O usuário faz alguma ação que altera a URL para www.site.com/#/section/page/6 (com o hash). Digamos que você tenha carregado o conteúdo correto da página 6 na página, portanto, além do hash, o usuário não está muito perturbado.

3) O usuário passa esse URL para outra pessoa ou o adiciona aos favoritos

4) Alguém mais, ou o mesmo usuário em uma data posterior, vai para www.site.com/#/section/page/6

5) O código www.site.com/ redireciona o usuário para www.site.com/section/page/6, usando algo assim:

if (window.location.hash.length > 0){ 
   window.location = window.location.hash.substring(1);
}

Espero que isso faça sentido! É uma abordagem útil para algumas situações.

20
Jeremy Warne

Todas as alterações da locação (window.location ou document.location) causarão uma solicitação nesse novo URL, se você não estiver apenas alterando o fragmento de URL. Se você alterar o URL, altere o URL.

Use técnicas de reescrita de URLs do lado do servidor como mod_rewrite do Apache se você não gostar dos URLs que está usando no momento.

12
Gumbo

Você pode adicionar tags de âncora. Eu uso isso no meu site http://www.piano-chords.net/ para que eu possa acompanhar com o Google Analytics o que as pessoas estão visitando na página.

Acabei de adicionar uma tag de âncora e, em seguida, a parte da página que quero acompanhar:

var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href = "http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);
12
Nate

Abaixo está a função de alterar o URL sem recarregar a página. Só é suportado para HTML5.

  function ChangeUrl(page, url) {
        if (typeof (history.pushState) != "undefined") {
            var obj = {Page: page, Url: url};
            history.pushState(obj, obj.Page, obj.Url);
        } else {
            window.location.href = "homePage";
            // alert("Browser does not support HTML5.");
        }
    }

  ChangeUrl('Page1', 'homePage');
12
Suraj

Como apontado por Thomas Stjernegaard Jeppesen, você poderia usar History.js para modificar os parâmetros de URL enquanto o usuário navega pelos seus links e aplicativos Ajax.

Quase um ano se passou desde aquela resposta, e o History.js cresceu e se tornou mais estável e cross-browser. Agora, ele pode ser usado para gerenciar estados de histórico em HTML5, bem como em muitos navegadores somente em HTML4. Nesta demo Você pode ver um exemplo de como funciona (além de poder testar suas funcionalidades e limites.

Se você precisar de alguma ajuda sobre como usar e implementar essa biblioteca, sugiro que você dê uma olhada no código-fonte da página de demonstração: você verá que é muito fácil de fazer.

Finalmente, para uma explicação abrangente sobre quais podem ser as questões sobre o uso de hashes (e hashbangs), confira este link por Benjamin Lupton.

7
Erenor Paz

Use history.pushState() da API de histórico do HTML 5.

Consulte o HTML5 History API para mais detalhes.

3
Prathamesh Rasam