Właśnie zauważyłem, że długie, zwinięte adresy URL Facebooka, do których jesteśmy przyzwyczajeni, wyglądają tak:
http://www.facebook.com/example.profile#!/pages/Another-Page/123456789012345
O ile pamiętam, na początku tego roku był to zwykły ciąg podobny do fragmentu adresu URL (zaczynając od #
), bez wykrzyknika. Ale teraz jest to shebang lub hashbang ( #!
), które wcześniej widziałem tylko w skryptach powłoki i skryptach Perla.
Te nowe Twitter URL teraz również posiadają #!
symbole. Na przykład adres URL profilu na Twitterze wygląda teraz tak:
http://twitter.com/#!/BoltClock
Czy #!
teraz odgrywa jakąś szczególną rolę w adresach URL, na przykład dla pewnego frameworku Ajax lub czegoś takiego, ponieważ nowe interfejsy Facebooka i Twittera są teraz w dużej mierze Ajaxified?
Czy użycie tego w moich adresach URL w jakikolwiek sposób przydałoby się mojej aplikacji internetowej?
shebang
było ... en.wikipedia.org/wiki/Shebang_%28Unix%29Odpowiedzi:
Ta technika jest teraz przestarzała .
Ten używany do poinformować Google, jak indeksować strony.
https://developers.google.com/webmasters/ajax-crawling/
Ta technika została w większości zastąpiona przez możliwość użycia JavaScript History API, który został wprowadzony wraz z HTML5. W przypadku adresu URL takiego jak
www.example.com/ajax.html#!key=value
Google sprawdzi adres URL,www.example.com/ajax.html?_escaped_fragment_=key=value
aby pobrać wersję treści inną niż AJAX.źródło
Oktororpe / number-sign / hashmark ma specjalne znaczenie w adresie URL, zwykle identyfikuje nazwę sekcji dokumentu. Dokładny termin jest taki, że tekst następujący za skrótem jest zakotwiczoną częścią adresu URL. Jeśli używasz Wikipedii, zobaczysz, że większość stron ma spis treści i możesz przeskakiwać do sekcji w dokumencie za pomocą kotwicy, takich jak:
https://en.wikipedia.org/wiki/Alan_Turing#Early_computers_and_the_Turing_test
https://en.wikipedia.org/wiki/Alan_Turing
identyfikuje stronę iEarly_computers_and_the_Turing_test
jest kotwicą. Powodem, dla którego Facebook i inne aplikacje JavaScript (jak mój własny Wood & Stones ) używają kotwic, jest to, że chcą, aby strony były znaczące (jak sugeruje komentarz do tej odpowiedzi) lub obsługują przycisk Wstecz bez ponownego ładowania całej strony z serwer .Aby obsługiwać zakładki i przycisk Wstecz, musisz zmienić adres URL. Jeśli jednak zmienisz część strony (z czymś podobnym
window.location = 'http://raganwald.com';
) na inny adres URL lub bez określenia kotwicy, przeglądarka załaduje całą stronę z adresu URL. Wypróbuj to w Firebug lub Safari w konsoli Javascript. Obciążeniehttp://minimal-github.gilesb.com/raganwald
. Teraz w konsoli Javascript wpisz:Odśwież stronę zobaczysz z serwera. Teraz wpisz:
Aha! Brak odświeżania strony! Rodzaj:
Wciąż brak odświeżania. Użyj przycisku Wstecz, aby sprawdzić, czy te adresy URL znajdują się w historii przeglądarki. Przeglądarka zauważa, że jesteśmy na tej samej stronie, ale po prostu zmieniamy kotwicę, więc nie można jej ponownie załadować. Dzięki takiemu zachowaniu możemy mieć pojedynczą aplikację JavaScript, która wydaje się być w przeglądarce na jednej „stronie”, ale ma wiele zakładek, które można podziwiać przy użyciu przycisku Wstecz. Aplikacja musi zmienić kotwicę, gdy użytkownik wejdzie w inne „stany”, i podobnie, jeśli użytkownik użyje przycisku Wstecz, zakładki lub linku, aby załadować aplikację z dołączoną kotwicą, aplikacja musi przywrócić odpowiedni stan.
A więc masz to: kotwice zapewniają programistom Javascript mechanizm tworzenia aplikacji umożliwiających tworzenie zakładek, indeksowanie i dostosowywanie do przycisków. Ta technika ma nazwę: jest to interfejs jednostronicowy .
ps Czwarta zaleta tej techniki: ładowanie zawartości strony przez AJAX, a następnie wstrzykiwanie jej do bieżącej DOM może być znacznie szybsze niż ładowanie nowej strony. Oprócz zwiększenia prędkości, inne sztuczki, takie jak ładowanie niektórych części w tle, mogą być wykonywane pod kontrolą programisty.
pps Biorąc to wszystko pod uwagę, „huk” lub wykrzyknik to kolejna wskazówka dla robota Google, że dokładnie ta sama strona może zostać załadowana z serwera pod nieco innym adresem URL. Zobacz indeksowanie Ajax . Inną techniką jest umieszczenie każdego linku w adresie URL dostępnym na serwerze, a następnie użycie dyskretnego Javascript, aby zmienić go w SPI z kotwicą.
Oto kolejny kluczowy link: Manifest interfejsu pojedynczej strony
źródło
self.document.location.hash
podaje wartość tego skrótu#!
aspekcie moje pytanie w ogóle . Dlatego powiedział, że jest zbędny. Liczba głosów tutaj jest prawdopodobnie spowodowana dużym ruchem, kiedy moje pytanie dotarło do Hacker News w połączeniu z samą długością tej odpowiedzi.Po pierwsze: jestem autorem Manifestu interfejsu pojedynczej strony, cytowanego przez raganwalda
Jak bardzo dobrze wyjaśnił raganwald, najważniejszym aspektem podejścia opartego na interfejsie pojedynczej strony (SPI) stosowanym w FaceBook i Twitter jest użycie skrótu
#
w adresach URLZnak
!
jest dodawany tylko do celów Google, notacja ta jest „standardem” Google do indeksowania witryn intensywnie korzystających z AJAX (w ekstremalnych witrynach z interfejsem Single Page Interface). Gdy robot Google znajdzie adres URL#!
, wie, że istnieje alternatywny konwencjonalny adres URL zapewniający ten sam „stan” strony, ale w tym przypadku czas ładowania.Pomimo tego, że
#!
kombinacja jest bardzo interesująca dla SEO, jest obsługiwana tylko przez Google (o ile wiem), dzięki niektórym sztuczkom JavaScript możesz budować strony internetowe SPI SEO kompatybilne z dowolnym robotem indeksującym (Yahoo, Bing ...).Manifest SPI i wersje demonstracyjne nie używają
!
haszującego formatu Google , notację tę można łatwo dodać, a indeksowanie SPI może być jeszcze łatwiejsze (AKTUALIZACJA: teraz! Notacja jest używana i pozostaje kompatybilna z innymi wyszukiwarkami).Spójrz na ten samouczek , jest przykładem prostej witryny ItsNat SPI, ale możesz wybrać kilka pomysłów na inne frameworki, ten przykład jest zgodny z SEO dla dowolnego robota sieciowego.
Trudnym problemem jest wygenerowanie dowolnego (lub wybranego) „stanu strony AJAX” jako zwykłego HTML dla SEO, w ItsNat jest bardzo łatwy i automatyczny, ta sama strona jest w tym samym czasie SPI lub strona oparta na SEO (lub gdy JavaScript jest wyłączony dla dostępności). W przypadku innych frameworków internetowych możesz zawsze stosować podejście podwójnej strony, jedna strona jest oparta na SPI, a druga strona dla SEO, na przykład Twitter stosuje tę technikę „podwójnej strony”.
źródło
Byłbym bardzo ostrożny, jeśli zastanawiasz się nad przyjęciem tej konwencji hashbangu.
Naprawdę chcesz używać pushState zamiast hashbangów , ponieważ sprawianie , by twoje adresy URL były brzydkie i prawdopodobnie uszkodzone - na zawsze - jest kolosalnym i trwałym minusem hashbanga.
źródło
/blah#foo/feep/baz?stuff=nonsense
. Nowy ekwiwalent ścieżki to/blah/foo/feep/baz?stuff=nonsense
(uwaga # zastąpiona przez /). Zrobiłem to po prostu przez ustawienie trasy w mojej konfiguracji, która przechwytywała/blah
i sprawdzała, czy ma ona, a jeśli tak, dołączającą zawartość skrótu po ukośniku. UratowanoAby dobrze sobie z tym wszystkim poradzić, Twitter - jeden z pionierów hashbangowego adresu URL i interfejsu pojedynczej strony - przyznał, że system hashbang był na dłuższą metę powolny i że faktycznie zaczęli cofać decyzję i wracać do linki oldschoolowe.
Artykuł na ten temat znajduje się tutaj.
źródło
Zawsze zakładałem, że
!
właśnie wskazałem, że następujący po nim fragment skrótu odpowiada adresowi URL,!
zajmując miejsce katalogu głównego witryny lub domeny. Teoretycznie może to być wszystko, ale wygląda na to, że Google AJAX Crawling API lubi to w ten sposób.Hash, oczywiście, wskazuje tylko, że nie następuje prawdziwe przeładowanie strony, więc tak, to dla celów AJAX. Edycja: Raganwald wykonuje cudowną robotę, wyjaśniając to bardziej szczegółowo.
źródło
Odpowiedzi powyżej dobrze opisują, dlaczego i jak są używane na Twitterze i Facebooku, brakowało mi wyjaśnienia, co
#
domyślnie…W „normalnej” (nie aplikacji na jednej stronie) możesz wykonać zakotwiczenie
hash
do dowolnego elementu, który ma identyfikator, umieszczając go w url po haszowaniu#
Przykład:
(Chrome) Kliknij F12lub Rihgt Mousei
Inspect element
następnie weź
id="answer-10831233"
i dodaj do adresu URL, jak poniżej/programming/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for#answer-10831233
a otrzymasz link, który przeskakuje do tego elementu na stronie
Do czego służy shebang / hashbang (#!) Na Facebooku i nowe adresy URL na Twitterze?
Używając
#
w sposób opisany w powyższych odpowiedziach wprowadzasz konfliktowe zachowania ... chociaż nie przespałbym się nad tym ... odkąd Angular stał się czymś standardowym ...źródło