-
Em setembro do ano passado, o Twitter renovou sua versão. Uma mudança significativa é que o símbolo “#!” foi adicionado ao URL. Por exemplo, o URL da página inicial do usuário antes da revisão é
http://twitter.com/nomedeusuário
Após a revisão, tornou-se
http://twitter.com/#!/nomedeusuário
Esta é a primeira vez que “#” é usado em URLs importantes em grande escala por um site convencional. Isso mostra que o papel do sinal de hash está sendo reconhecido novamente. Este artigo é baseado no artigo do HttpWatch para classificar todos os pontos de conhecimento importantes relacionados ao sinal de libra.
1. O significado de #
#Representa uma posição na página web. O caractere à direita é o identificador da posição. por exemplo,
http://www.example.com/index.html#PRint
Representa a posição de impressão da página da web index.html. Depois que o navegador ler esse URL, ele rolará automaticamente a posição de impressão para a área visível. Existem duas maneiras de especificar um identificador para o local de uma página da web. Uma é usar pontos de ancoragem, como <a name="print"></a>, e a outra é usar atributos de id, como <div id="print" >.
2. As solicitações HTTP não incluem #
# é usado para orientar as ações do navegador e é completamente inútil no lado do servidor. Portanto, # não está incluído na solicitação HTTP.
Por exemplo, visite o seguinte URL,
http://www.example.com/index.html#print
A solicitação real feita pelo navegador é esta:
OBTER /index.html HTTP/1.1
Hospedeiro: www.example.com
Como você pode ver, apenas index.html é solicitado e não há nenhuma parte "#print".
3. Caracteres após #
Quaisquer caracteres que apareçam após o primeiro # serão interpretados pelo navegador como um identificador posicional. Isso significa que nenhum desses caracteres será enviado ao servidor.
Por exemplo, o seguinte URL destina-se a especificar um valor de cor:
http://www.example.com/?color=#fff
No entanto, a solicitação real feita pelo navegador é:
OBTER /?color= HTTP/1.1
Hospedeiro: www.example.com
Como você pode ver, "#fff" foi omitido. Somente se # for transcodificado em %23, o navegador irá tratá-lo como um caractere literal. Ou seja, a URL acima deve ser escrita como:
http://example.com/?color=%23fff
4. Altere #Não acionar o recarregamento da página da web
Basta alterar a parte após #, o navegador irá apenas rolar para a posição correspondente e não recarregará a página web.
Por exemplo, de
http://www.example.com/index.html#location1
Mudar para
http://www.example.com/index.html#location2
O navegador não solicitará novamente index.html do servidor.
5. Alterar # alterará o histórico de acesso do navegador
Cada vez que você alterar a parte após #, um registro será adicionado ao histórico de acesso do navegador. Utilize o botão “Voltar” para retornar à posição anterior. Isso é particularmente útil para aplicativos Ajax, onde diferentes valores # podem ser usados para representar diferentes estados de acesso e, então, o usuário pode receber um link para acessar um determinado estado. Vale ressaltar que as regras acima não valem para IE 6 e IE 7, pois não irão aumentar o histórico devido à mudança de #.
6. window.location.hash lê # valor
A propriedade window.location.hash é legível e gravável. Ao ler, pode ser usado para determinar se o status da página web mudou durante a escrita, um registro de histórico de acesso será criado sem recarregar a página web;
7. evento onhashchange
Este é um novo evento no HTML 5. Este evento será acionado quando o valor # mudar. IE8+, Firefox 3.6+, Chrome 5+, Safari 4.0+ apoiam este evento.
Existem três maneiras de usá-lo:
janela.onhashchange=func;
<body onhashchange="func();">
window.addEventListener("hashchange", func, false);
Para navegadores que não suportam onhashchange, você pode usar setInterval para monitorar alterações em location.hash.
8. O mecanismo de rastreamento do Google #
Por padrão, os web spiders do Google ignoram a parte # do URL.
No entanto, o Google também estipula que se você deseja que o conteúdo gerado pelo Ajax seja lido pelo mecanismo de navegação, você pode usar "#!" no URL, e o Google converterá automaticamente o conteúdo seguinte no valor da string de consulta _escaped_fragment_ .
Por exemplo, o Google descobriu que o URL da nova versão do Twitter é o seguinte:
http://twitter.com/#!/nomedeusuário
Outro URL será rastreado automaticamente:
http://twitter.com/?_escaped_fragment_=/nome de usuário
Através deste mecanismo, o Google pode indexar conteúdo dinâmico do Ajax.
Fonte do artigo: diário online de Ruan Yifeng