Co to jest shebang / hashbang (#!) w Facebook i nowe adresy URL Twitter dla?

Znak oktothorpe / number-sign / hashmark ma szczególne znaczenie w adresie URL, Zwykle identyfikuje nazwę sekcji dokumentu. Dokładnym terminem jest to, że tekst po hash jest anchor część adresu URL. Jeśli korzystasz z Wikipedii, zobaczysz, że większość stron ma spis treści i możesz przejść do sekcji w dokumencie za pomocą kotwicy, takich jak as:

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

https://en.wikipedia.org/wiki/Alan_Turing identyfikuje stronę i Early_computers_and_the_Turing_test jest kotwicą. Powodem, dla którego Facebook i inne aplikacje oparte na Javascript (jak moja własna Wood & Stones) używają kotwic, jest to, że chcą tworzyć strony bookmarkable (zgodnie z sugestią komentarza na temat tej odpowiedzi) lub obsługiwać przycisk Wstecz bez przeładowywania całej strony z serwera.

W celu wsparcia zakładki i przycisk Wstecz, musisz zmienić adres URL. Jeśli jednak zmienisz część strony (za pomocą czegoś w rodzaju window.location = 'http://raganwald.com';) na inny adres URL lub bez podania kotwicy, przeglądarka załaduje całą stronę z adresu URL. Spróbuj tego w Firebug lub konsoli Javascript Safari. Load http://minimal-github.gilesb.com/raganwald. Teraz w konsoli Javascript wpisz:

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

Zobaczysz odświeżanie strony z serwera. Teraz typ:

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

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

Wciąż brak odświeżania. Użyj przycisku Wstecz, aby zobaczyć, czy te adresy URL znajdują się w historii przeglądarki. Przeglądarka zauważa, że jesteśmy na tej samej stronie, ale tylko zmieniamy kotwicę, więc nie ładuje się ponownie. Dzięki temu zachowaniu możemy mieć jedną aplikację Javascript, która wydaje się przeglądarce być na jednej "stronie", ale mieć wiele sekcji bookmarkable, które respektują przycisk Wstecz. Aplikacja musi zmienić kotwicę, gdy użytkownik wprowadza różne "stany" , a także jeśli użytkownik używa przycisku Wstecz lub Zakładki lub link do załadowania aplikacji z dołączoną kotwicą, aplikacja musi przywrócić odpowiedni stan.

Więc masz to: Anchory zapewniają programistom Javascript mechanizm tworzenia aplikacji bookmarkable, indexable i back-button-friendly. Technika ta ma swoją nazwę: Jest to Single Page Interface .

P. s. jest czwarta zaleta tej techniki: ładowanie zawartości Strony przez AJAX, a następnie wstrzykiwanie jej do bieżącego DOM może być dużo szybsze niż ładowanie nowej strony. Oprócz zwiększenia prędkości, dalsze triki, takie jak ładowanie niektórych części w tle, mogą być wykonywane pod kontrolą programisty.

P. P. S.biorąc pod uwagę to wszystko, " huk " lub wykrzyknik jest kolejną wskazówką dla robota Google, że dokładnie ta sama strona może być załadowana z serwera pod nieco innym adresem URL. Zobacz Ajax Crawling . Inną techniką jest przekierowanie każdego linku do adresu URL dostępnego na serwerze, a następnie użycie dyskretny Javascript, aby zmienić go w SPI z kotwicą.

Tu znowu jest kluczowy link: the Single Page Interface Manifest

Po pierwsze: jestem autorem manifestu interfejsu jednej strony cytowanego przez raganwalda

Jak raganwald wyjaśnił bardzo dobrze, najważniejszym aspektem interfejsu pojedynczej strony (SPI) używanym w FaceBook i Twitter jest użycie hash # w adresach URL

Znak ! jest dodawany tylko dla celów Google, ta notacja jest "standardem" Google do indeksowania stron internetowych intensywnych na AJAX (w skrajnych Single Page Interface web sites). Gdy robot Google znajduje adres URL z #! wie, że istnieje alternatywny konwencjonalny adres URL zapewniający tę samą stronę "stan", ale w tym przypadku w czasie ładowania.

Pomimo #! połączenie jest bardzo interesujące dla SEO, jest wspierany tylko przez Google (o ile wiem), z niektórych sztuczek JavaScript można zbudować SPI stron internetowych SEO kompatybilne dla każdego web crawler (Yahoo, Bing...).

Manifest SPI i dema nie używają formatu ! Google w hashach, ten zapis można łatwo dodać i SPI raczkowanie może być jeszcze łatwiejsze (aktualizacja: teraz ! notacja jest używana i pozostaje zgodna z innymi wyszukiwarkami).

Spójrz na ten tutorial, jest przykładem prostej witryny ItsNat SPI, ale możesz wybrać kilka pomysłów na inne frameworki, ten przykład jest kompatybilny z SEO dla każdego robota internetowego.

Trudnym problemem jest wygenerowanie dowolnego (lub wybranego) "Ajax page state" jako zwykły HTML dla SEO, w ItsNat jest bardzo łatwy i automatyczny, ta sama strona jest w tym samym czasie SPI lub strona oparte na SEO (lub gdy JavaScript jest wyłączony dla dostępności). W przypadku innych frameworków internetowych możesz zawsze stosować podejście double site, jedna strona jest oparta na SPI, a inna strona oparta na SEO, na przykład Twitter używa tej techniki "podwójnej strony".

Byłabym bardzo ostrożna, jeśli rozważasz przyjęcie tej konwencji hashbang.

Kiedy już będziesz hashbang, nie będziesz mógł wrócić. jest to prawdopodobnie najbardziej stickiest problem. Post Bena wysunął punkt, że gdy pushState jest szerzej przyjęty, możemy zostawić hashbangs za sobą i powrócić do tradycyjnych adresów URL. Cóż, faktem jest, że nie można. wcześniej stwierdziłem, że adresy URL są na zawsze, są indeksowane i archiwizowane i ogólnie przechowywane wokół. Aby dodać do tego fajne adresy URL nie zmieniaj się. Nie chcemy odłączać się od wszystkich cennych linków do naszych treści. Jeśli zaimplementowałeś adresy URL hashbang w dowolnym momencie, chcesz je zmienić bez łamania linków, jedynym sposobem, aby to zrobić, jest uruchomienie JavaScript na dokumencie głównym Twojej domeny. Na zawsze. To nie jest w żaden sposób tymczasowe, utknąłeś z nim.

Naprawdę chcesz użyć pushState zamiast hashbangs, ponieważ uczynienie twoich adresów URL brzydkimi i prawdopodobnie zepsutymi-na zawsze-jest kolosalny i trwały minus haszbangów.

Aby mieć dobrą obserwację tego wszystkiego, Twitter - jeden z pionierów hashbang URL i single-page-interface-przyznał, że system hashbang był powolny w dłuższej perspektywie i że faktycznie zaczęli odwracać decyzję i powracać do starych linków.

Artykuł na ten temat jest tutaj.

Zawsze zakładałem, że ! wskazuje tylko, że następujący po nim fragment hasha odpowiada adresowi URL, a ! zajmuje miejsce katalogu głównego lub domeny. Może to być cokolwiek, w teorii, ale wydaje się, że Google AJAX Crawling API lubi to w ten sposób.

Hash, oczywiście, po prostu wskazuje, że nie ma prawdziwego przeładowania strony, więc tak, to dla celów AJAX. Edit: Raganwald robi świetną robotę wyjaśniając to bardziej szczegółowo.

Odpowiedzi powyżej dobrze opisują, dlaczego i jak jest używany na Twitterze i facebook, to co mi umknęło to wyjaśnienie, co # robi domyślnie...

Na 'normalnym' (nie pojedynczej aplikacji) można wykonać anchoring za pomocą hash do dowolnego elementu, który ma id, umieszczając ten element id w adresie URL po hash #

Przykład:

(na Chrome) kliknij F12lub Rihgt Mouse i Inspect element

Następnie weź id="answer-10831233" i dodaj do url jak po

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

I dostaniesz link, który przeskakuje do tego elementu na stronie

Co to jest shebang / hashbang (#!) w Facebook i nowe adresy URL Twitter dla?

Używając # w sposób opisany w powyższych odpowiedziach wprowadzasz sprzeczne zachowania... chociaż nie spałbym przez to... od Angular stał się nieco standardem....