Modificar Endereço URL Bar em AJAX App para combinar Estado Atual

votos
160

Eu estou escrevendo um aplicativo AJAX, mas como o usuário se move através do aplicativo, eu gostaria que o URL na barra de endereços para atualizar apesar da falta de recarrega a página. Basicamente, eu gostaria que eles sejam capazes de marcar a qualquer momento e, assim, retornar ao estado atual.

Como são pessoas que manipulam a manutenção de sossego em aplicativos AJAX?

Publicado 04/08/2008 em 18:53
fonte usuário
Em outras línguas...                            


8 respostas

votos
116

A maneira de fazer isso é manipular location.hashquando as atualizações AJAX resultar em uma mudança de estado que você gostaria de ter um URL discreta. Por exemplo, se o URL da sua página é:

http://example.com/

Se uma função do lado do cliente executado este código:

// AJAX code to display the "foo" state goes here.

location.hash = 'foo';

Em seguida, a URL exibida no navegador seria actualizada para:

http://example.com/#foo

Isto permite aos utilizadores marcar o estado "foo" da página, e usar o histórico do navegador para navegar entre os estados.

Com este mecanismo no lugar, então você vai precisar para analisar a parte hash da URL no lado do cliente usando JavaScript para criar e exibir o estado inicial for o caso, como identificadores de fragmento (a parte após o #) não são enviados para o servidor.

Plug-in hashchange de Ben Alman faz o último uma brisa se você estiver usando jQuery.

Respondeu 04/08/2008 em 19:04
fonte usuário

votos
18

Olhe para sites como book.cakephp.org. Este site muda a URL sem usar o hash e usar AJAX. Eu não sei como ele faz isso exatamente, mas eu venho tentando descobrir isso. Se alguém souber, me avise.

github.com também quando se olha para a navegação dentro de um determinado projeto.

Respondeu 13/02/2011 em 20:47
fonte usuário

votos
17

É improvável que o escritor quer recarregar ou redirecionar o seu visitante quando usando Ajax. Mas por que não usar o HTML5 pushState/ replaceState?

Você vai ser capaz de modificar o addressbar tanto quanto você gosta. Obter urls aparência natural, com AJAX.

Confira o código no meu mais recente projeto: http://iesus.se/

Respondeu 27/04/2011 em 09:09
fonte usuário

votos
12

Isto é semelhante ao que Kevin disse. Você pode ter seu estado cliente como um objeto javascript, e quando você deseja salvar o estado, você serializar o objeto (usando JSON e codificação Base64). Você pode então definir o fragmento do href para esta cadeia.

var encodedState = base64(json(state));
var newLocation = oldLocationWithoutFragment + "#" + encodedState;

document.location = newLocation; // adds new entry in browser history
document.location.replace(newLocation); // replaces current entry in browser history

A primeira forma irá tratar o novo estado como um novo local (por isso o botão de volta irá levá-los para o local anterior). Este último não faz.

Respondeu 04/08/2008 em 19:02
fonte usuário

votos
3

Se OP ou outros ainda estão procurando uma maneira de fazer modifique o histórico do navegador para habilitar o estado, utilizando pushState e replaceState, como sugerido por IESUS, é o caminho 'certo' para fazê-lo agora. É principal vantagem sobre location.hash parece ser que ele cria urls reais, e não apenas hashes. Se o histórico do navegador usando hashes é salvo, e depois revisitado com javascript desativado, o aplicativo não funcionará, já que os hashes não são enviados para o servidor. No entanto, se pushState tem sido utilizado, todo o percurso será enviado para o servidor, que você pode então construir para responder adequadamente às rotas. Eu vi um exemplo onde os mesmos modelos bigode foram usados ​​no servidor e do lado do cliente. Se o cliente tinha o JavaScript habilitado, ele iria receber respostas mal-humorado, evitando a ida e volta para o servidor, mas o app iria funcionar perfeitamente bem sem a javascript. Assim, o aplicativo pode graciosamente degradar na ausência de javascript.

Além disso, eu acredito que há alguma estrutura lá fora, com um nome como history.js. Para navegadores que suportam HTML5, ele usa pushState, mas se o navegador não suporta isso, automaticamente cai para trás a usar hashes.

Respondeu 23/06/2011 em 10:20
fonte usuário

votos
3

O método window.location.hash é a forma preferida de fazer as coisas. Para uma explicação de como fazê-lo, Patterns Ajax - URLs únicas .

YUI tem uma implementação desse padrão como um módulo, que inclui IE arounds trabalho específico para obter o botão voltar a trabalhar juntamente com re-escrever o endereço usando o hash. YUI navegador Histórico do Técnico .

Outros quadros têm implementações semelhantes também. O ponto importante é se você quiser a história a trabalhar juntamente com a re-escrever o endereço, os diferentes navegadores precisam de diferentes maneiras de lidar com ele. (Este é detalhado no primeiro artigo link.)

IE precisa de um corte com base iframe, onde Firefox irá produzir história dupla usando o mesmo método.

Respondeu 31/03/2009 em 06:54
fonte usuário

votos
3

SWFAddress trabalha em projetos Flash e JavaScript e permite criar URLs bookmarkable (usando o método de hash mencionado acima), bem como dando-lhe suporte de botão para trás.

http://www.asual.com/swfaddress/

Respondeu 01/09/2008 em 14:43
fonte usuário

votos
2

Verifique se o usuário está 'dentro' da página, quando você clica na barra de URL, javascript diz que você está fora da página. Se você alterar a barra de URL e pressione 'ENTER' com o símbolo '#' dentro dele, então você ir para a página novamente, sem clique na página manualmente com o cursor do mouse, em seguida, um comando evento keyboad (document.onkeypress) de javascript vai ser capaz de verificar se ele entrar e ativa o javascript para redirecionamento. Você pode verificar se o usuário está na página com window.onfocus e verifique se ele está fora com window.onblur.

Sim, é possível.

;)

Respondeu 14/10/2010 em 00:18
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more