O que é o shebang/hashbang (#!) no Facebook e Twitter novo URLs?

Question

Eu só notei que o longa, complicada Facebook URLs que estamos acostumados agora olhar como este:

http://www.facebook.com/example.profile#!/pages/Another-Page/123456789012345

Tanto quanto me lembro, no início deste ano, foi apenas uma URL normal-fragmento-como string (começando com #), sem o ponto de exclamação.Mas agora é tudo ou hashbang (#!), que eu já tenha visto apenas em scripts de shell e scripts Perl.

O novo Twitter URLs agora também apresentam o #! símbolos.Um perfil no Twitter URL, por exemplo, agora este aspecto:

http://twitter.com/#!/BoltClock

Não #! agora jogar algum papel especial na URLs, como por um certo Ajax framework ou coisa desde que o novo Facebook e Twitter interfaces são agora em grande parte Ajaxified?Poderia usar isso no meu URLs benefício minha aplicação Web em qualquer forma?

Answer 1

Esta técnica é agora depreciado.

este costumava ser Diga ao Google como indexar a página.

https://developers.google.com/webmasters/ajax-crawling/

Essa técnica foi suplantada principalmente pela capacidade de usar a API de histórico de JavaScript que foi introduzida ao lado do HTML5. Para um URL como www.example.com/ajax.html#!key=value, Google vai verificar o URL www.example.com/ajax.html?_escaped_fragment_=key=value Para buscar uma versão não-ajax do conteúdo.

Answer 2

O octothorpe/número-início de sessão/hashmark tem um significado especial em uma URL, o que normalmente identifica o nome de uma seção de um documento.Preciso do termo é que o texto a seguir o hash é o âncora parte de uma URL.Se você usar a Wikipédia, você vai ver que a maioria das páginas tem uma tabela de conteúdo, e você pode pular para seções dentro do documento com uma âncora, tais como:

https://en.wikipedia.org/wiki/Alan_Turing#Early_computers_and_the_Turing_test

https://en.wikipedia.org/wiki/Alan_Turing identifica a página e Early_computers_and_the_Turing_test é a âncora.A razão que o Facebook e outras Javascript orientado por aplicações (como a minha Madeira E Pedras) utilização de âncoras é que eles querem fazer páginas bookmarkable (como sugerido por um comentário em que a resposta) ou apoiar o botão voltar sem recarregar a página inteira do servidor.

A fim de apoiar bookmarking e o botão voltar, você precisará alterar o URL.No entanto, se você alterar a parte da página (algo como window.location = 'http://raganwald.com';) para uma URL diferente ou sem especificar uma âncora, o navegador irá carregar a página inteira a partir do URL.Tente isso no Firebug ou Safari do console Javascript.Carga http://minimal-github.gilesb.com/raganwald.Agora no console Javascript, digite:

window.location = 'http://minimal-github.gilesb.com/raganwald';

Você verá a página de atualização do servidor.Agora digite:

window.location = 'http://minimal-github.gilesb.com/raganwald#try_this';

Aha!Nenhuma atualização da página!Tipo:

window.location = 'http://minimal-github.gilesb.com/raganwald#and_this';

Ainda não há atualização.Use o botão back para ver que essas URLs que estão no histórico do navegador.O navegador percebe que estamos na mesma página, mas mudando apenas a âncora, para que ele não recarregar.Graças a este tipo de comportamento, nós podemos ter um único aplicativo Javascript que aparece ao navegador para ser uma 'página', mas para ter muitos bookmarkable seções que respeitar o botão voltar.A aplicação tem de alterar a âncora quando um usuário entra diferentes "estados", e da mesma forma, se um usuário usa o botão voltar ou um marcador ou um link para carregar o aplicativo com uma âncora, inclusive, a aplicação tem de restaurar o estado apropriado.

Portanto, você tem isso:Âncoras fornecer Javascript programadores com um mecanismo de tomada de bookmarkable, intercambiáveis, e voltar-botão-friendly aplicações.Esta técnica tem um nome:É um Página Única Interface.

p.s.Há uma quarta vantagem dessa técnica:A página de carregamento de conteúdo através de AJAX e, em seguida, injetando-o no DOM atual pode ser muito mais rápido do que carregar uma nova página.Além de aumentar a velocidade, mais truques de como carregar certas partes do fundo pode ser realizada de acordo com o programador de controle.

p.p.s.Deu tudo isso, o "bang" ou ponto de exclamação é mais uma dica para o Google rastreador da web do que a exata mesma página pode ser carregado a partir do servidor em um ligeiramente diferente URL.Ver Rastreamento De Ajax.Outra técnica é fazer com que cada um link a apontar para um servidor-URL acessível e, em seguida, usar Javascript discreto para transformá-lo em um SPI com uma âncora.

Aqui está a chave de link novamente: A Única Interface Da Página Manifesto

Answer 3

Primeiro de tudo: eu sou o autor do manifesto da interface da página única citada por Raganwald

Como Raganwald explicou muito bem, o aspecto mais importante da abordagem da interface de página única (SPI) usada no Facebook e Twitter é o uso do hash # em URLs

O personagem ! é adicionado apenas para fins do Google, essa notação é um "padrão" do Google para sites de rastreamento intensivos no AJAX (nos sites extremos de interface de página única). Quando o rastreador do Google encontra um URL com #! Ele sabe que existe um URL convencional alternativo fornecendo a mesma página "estado", mas neste caso no tempo de carregamento.

Apesar de #! A combinação é muito interessante para o SEO, é suportada apenas pelo Google (até agora eu sei), com alguns truques JavaScript que você pode criar sites SPI Sites compatíveis com qualquer rastreador da web (Yahoo, Bing ...).

O manifesto spi e demos não usam o formato do Google de ! Nos hashes, essa notação pode ser facilmente adicionada e o rastejamento SPI pode ser ainda mais fácil (atualização: agora! A notação é usada e permanece compatível com outros mecanismos de pesquisa).

Dê uma olhada nisso tutorial, é um exemplo de um site simples do ITSNAT SPI, mas você pode escolher algumas idéias para outras estruturas, este exemplo é compatível com SEO para qualquer rastreador da web.

O problema difícil é gerar qualquer "estado de página de Ajax" selecionado "como HTML simples para SEO, no itsnat é muito fácil e automático, o mesmo site é ao mesmo tempo SPI ou página baseada em SEO (ou quando o JavaScript é desativado para acessibilidade). Com outras estruturas da web que você pode seguir para a abordagem do site duplo, um site é baseado em SPI e outra página baseada no SEO, por exemplo, o Twitter usa essa técnica de "site duplo".

Answer 4

Eu gostaria muito cuidadoso Se você está pensando em adotar essa convenção de Hashbang.

Depois de Hashbang, você não pode voltar. Este é provavelmente o problema mais pegajoso. A postagem de Ben apresentou o ponto de que, quando PushState é mais amplamente adotado do que podemos deixar para trás os hashbangs e retornar aos URLs tradicionais. Bem, o fato é que você não pode. Antes, afirmei que os URLs são para sempre, eles são indexados, arquivados e geralmente mantidos por perto. Para adicionar a isso, os URLs legais não mudam. Não queremos nos desconectar de todos os valiosos links para o nosso conteúdo. Se você implementou URLs de hashbang a qualquer momento, deseja alterá -los sem quebrar os links da única maneira de fazer isso é executando algum JavaScript no documento raiz do seu domínio. Para todo sempre. Não é de forma alguma temporário, você está preso a ele.

Você realmente quer Use PushState em vez de Hashbangs, porque tornar seus URLs feios e possivelmente quebrados - para sempre - é uma desvantagem colossal e permanente para os hashbangs.

Answer 5

Para ter um bom acompanhamento sobre tudo isso, o Twitter-um dos pioneiros do Hashbang URL e interface de página única-admitiu que o sistema Hashbang era lento a longo prazo e que eles realmente começaram a reverter a decisão e retornar a Links da velha escola.

Artigo sobre isso está aqui.

Answer 6

Eu sempre assumi o ! apenas indicou que o fragmento de hash que se seguiu correspondia a um URL, com ! tomando o local da raiz ou domínio do site. Pode ser qualquer coisa, em teoria, mas parece que a API rastreadora do Google Ajax gosta dessa maneira.

O hash, é claro, apenas indica que nenhuma página real está ocorrendo, então sim, é para fins de Ajax. EDIT: Raganwald faz um trabalho adorável explicando isso com mais detalhes.

Answer 7

As respostas acima descrevem bem por que e como é usado no Twitter e no Facebook, o que eu perdi é explicação o que # por padrão ...

Em um 'normal' (não um aplicativo de página único), você pode fazer ancoragem com hash Para qualquer elemento que tenha identificação, colocando esse elementos id em url após o hash #

Exemplo:

(no Chrome) Clique F12 ou Mouse rihgt e Inspect element

então pegue id="answer-10831233" e adicione ao URL como seguir

https://stackoverflow.com/questions/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for#answer-10831233

E você receberá um link que salta para esse elemento na página

Qual é o shebang/hashbang (#!) No Facebook e novos URLs do Twitter?

Usando # De uma maneira descrita nas respostas acima, você está introduzindo um comportamento conflitante ... embora eu não soltasse o sono sobre ele ... já que o Angular se tornou um pouco padrão ....