Alterar o URL no navegador sem carregar a nova página usando JavaScript

Question

Como eu teria uma ação JavaScript que pode ter alguns efeitos sobre a página atual, mas seria também mudar a URL no navegador por isso, se os hits usuário recarregar ou marcar a nova URL é usado?

Além disso, seria bom se o botão de volta seria recarregar a URL original.

Eu estou tentando gravar estado JavaScript na URL.

Answer 1

Com o HTML 5, use o href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html" rel="noreferrer"> função history.pushState . Como um exemplo:

<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

e a href:

<a href="#" id='click'>Click to change url to bar.html</a>

---

Se você quiser alterar a URL sem adicionar uma entrada à lista de botão de volta, o uso history.replaceState vez.

Answer 2

Se você quer que ele funcione em navegadores que não suportam history.pushState e history.popState ainda, a forma "antiga" é para definir o identificador de fragmento, que não irá causar um recarregamento da página.

A idéia básica é para definir a propriedade window.location.hash para um valor que contém todas as informações de estado que você precisa, em seguida, usar o window.onhashchange evento , ou para navegadores antigos que não suportam onhashchange (IE <8, Firefox <3,6), verifique periodicamente para ver se o hash mudou (usando setInterval por exemplo) e atualizar a página. Você também terá que verificar o valor de hash no carregamento da página para configurar o conteúdo inicial.

Se você estiver usando jQuery há um hashchange plug-in que irá utilizar qualquer método os suportes do navegador. Eu tenho certeza que existem plugins para outras bibliotecas também.

Uma coisa a ter cuidado é colidir com ids na página, porque o navegador irá rolar a qualquer elemento com um id correspondente.

Answer 3

window.location.href contém a URL atual. Você pode ler a partir dele, você pode anexar a ele, e você pode substituí-lo, o que pode causar um recarregamento da página.

Se, como parece, você quer gravar estado javascript na URL para que possa ser marcada, sem recarregar a página, anexá-lo para a URL atual depois de um # e ter um pedaço de javascript desencadeada pelo evento onload analisar a URL atual para ver se ele contém estado salvo.

Se você usar um? em vez de um #, você irá forçar um recarregamento da página, mas desde que você irá analisar o estado salvo na carga isso não pode realmente ser um problema; e isso fará com que os botões de avançar e retroceder trabalhar corretamente também.

Answer 4

Eu fortemente suspeito que isso não é possível, porque seria um problema de segurança incrível se fosse. Por exemplo, eu poderia fazer uma página que parecia uma página de login do banco, e fazer a URL na barra de endereços olhar apenas como o verdadeiro banco !

Talvez se você explicar por que você quer fazer isso, as pessoas podem ser capazes de sugerir abordagens alternativas ...

[Edit em 2011: Desde que eu escrevi essa resposta em 2008, mais informações veio à luz a respeito de um HTML5 técnica que permite a URL a ser modificado, desde que ele é da mesma origem]

Answer 5

configurações de segurança do navegador impedem as pessoas de modificar a URL exibida diretamente. Você poderia imaginar as vulnerabilidades de phishing que causaria.

Apenas maneira confiável para mudar a url sem alterar páginas é usar uma ligação interna ou hash. por exemplo: http://site.com/page.html se torna http://site.com/page.html#item1 . Esta técnica é usada frequentemente em Hijax (AJAX + preservar a história).

Ao fazer isso eu vou muitas vezes apenas usar links para as ações com o hash como o href, em seguida, adicionar clique eventos com jQuery que usam o hash solicitado para determinar e delegar a ação.

Espero que você define no caminho certo.

Answer 6

jQuery tem um grande plugin para o URL mudança dos navegadores, chamado jQuery-empurrador .

JavaScript pushState e jQuery podem ser utilizados em conjunto, como:

history.pushState(null, null, $(this).attr('href'));

Exemplo:

$('a').click(function (event) {

  // Prevent default click action
  event.preventDefault();     

  // Detect if pushState is available
  if(history.pushState) {
    history.pushState(null, null, $(this).attr('href'));
  }
  return false;
});

Usando apenas JavaScript history.pushState(), que muda a referência, que será usado no cabeçalho HTTP para XMLHttpRequest objetos criados depois de alterar o estado.

Exemplo:

window.history.pushState("object", "Your New Title", "/new-url");

O método pushState ():

pushState() usa três parâmetros: um objeto de estado, um título (que atualmente é ignorada), e (opcionalmente) uma URL. Vamos examinar cada um desses três parâmetros em mais detalhes:

1. objeto de estado - O objeto de estado é um objeto JavaScript que está associado com a nova entrada do histórico criado por pushState(). Sempre que as navega usuário para o novo estado, um evento popstate é acionado ea propriedade estado do evento contém uma cópia do objeto de estado da entrada do histórico.

   O objeto de estado pode ser qualquer coisa que pode ser serializado. Porque Firefox salva objetos de estado para o disco do usuário para que eles possam ser restaurados depois que o usuário reiniciar o seu navegador, que impõem um limite de tamanho de 640k caracteres na representação serializada de um objeto de estado. Se você passar um objeto de estado cuja representação serializada é maior do que isso para pushState(), o método lançará uma exceção. Se você precisar de mais espaço do que isso, você é encorajado a usar sessionStorage e / ou localStorage.

2. title - Firefox atualmente ignora esse parâmetro, embora possa usá-lo no futuro. Passando a cadeia vazia aqui deve ser seguro contra futuras alterações ao método. Alternativamente, você pode passar por um título curto para o estado a que você está se movendo.

3. URL - URL da nova entrada do histórico é dado por este parâmetro. Note que o navegador não tentará carregar esta URL após uma chamada para pushState(), mas pode tentar carregar o URL mais tarde, por exemplo, depois que o usuário reinicia seu browser. O novo URL não precisa ser absoluta; se é relativa, é resolvido em relação à URL atual. O novo URL deve ser da mesma origem que a URL atual; caso contrário, pushState() irá lançar uma exceção. Este parâmetro é opcional; se não for especificado, ele é definido como URL atual do documento.

Answer 7

Há um componente Yahoo YUI (histórico do navegador Manager) que pode lidar com isso: http: // developer.yahoo.com/yui/history/

Answer 8

galeria de fotos do Facebook faz isso usando um #hash na URL. Aqui estão alguns exemplos de URLs:

Antes de clicar em 'next':

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507

Depois de clicar em 'Next':

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507#!/photo.php?fbid=496435457507&set=a.218088072507.133423.681812507&pid=5887085&id=681812507

Observe o hash-bang (#!), Imediatamente seguido pelo novo URL.

Answer 9

Há um plugin jQuery http://www.asual.com/jquery/address/

Eu acho que isso é o que você precisa.

Answer 10

O que está funcionando para mim é - função history.replaceState() que é a seguinte -

history.replaceState(data,"Title of page"[,'url-of-the-page']);

Esta página não irá recarregar, você pode fazer uso dele com o evento de javascript

Answer 11

Eu queria saber se ele vai posible enquanto o caminho pai na página é mesmo, só que algo novo está anexado a ele.

Assim como deixou-nos dizer que o usuário está na página: http://domain.com/site/page.html Em seguida, o navegador pode me deixar fazer location.append = new.html ea página é: http://domain.com/site/page.htmlnew.html eo navegador não mudá-lo.

Ou simplesmente permitir que a pessoa alterar parâmetro get, então vamos location.get = me=1&page=1.

página de modo original torna-se http://domain.com/site/page.html?me=1&page=1 e não atualizar.

O problema com # é que os dados não são armazenados em cache (pelo menos eu não penso assim), quando hash é alterado. Por isso, é como se cada vez que uma nova página está sendo carregada, enquanto botões back-e para frente em uma página Ajax são capazes de dados de cache e não gastar tempo na re-carregar os dados.

Pelo que eu vi, a história já coisa Yahoo carrega todos os dados de uma só vez. Não parece estar a fazer quaisquer requisições Ajax. Assim, quando um div é usada para manipular método diferente de horas extras, que os dados não são armazenados para cada estado história.

Answer 12

meu código é:

//change address bar
function setLocation(curLoc){
    try {
        history.pushState(null, null, curLoc);
        return false;
    } catch(e) {}
        location.hash = '#' + curLoc;
}

e ação:

setLocation('http://example.com/your-url-here');

e exemplo

$(document).ready(function(){
    $('nav li a').on('click', function(){
        if($(this).hasClass('active')) {

        } else {
            setLocation($(this).attr('href'));
        }
            return false;
    });
});

Isso é tudo:)

Answer 13

Eu tive sucesso com:

location.hash="myValue";

Ele só acrescenta #myValue para a URL atual. Se você precisar disparar um evento na página de carga, você pode usar o mesmo location.hash para verificar se o valor relevante. Apenas lembre-se de remover o # do valor retornado por location.hash por exemplo.

var articleId = window.location.hash.replace("#","");

Answer 14

A mais simples resposta i presente,

window.history.pushState(null, null, "/abc")

isso vai adicionar /abc após o nome de domínio no URL do navegador. Basta copiar o código e cole-o no console do navegador e ver a URL mudar para " https://stackoverflow.com/abc "