W jaki sposób Facebook przepisuje źródłowy adres URL strony w pasku adresu przeglądarki?

Question

Przejdź do http://www.facebook.com/facebook?v=wall, a następnie kliknij zakładkę Informacje. Zawartość zostanie załadowana, a pasek adresu stanie się teraz http://www.facebook.com/facebook?v=info, ale strona nie przeładowała się ponownie.

Na początku myślę, że to Ajax, ale moje pytanie brzmi: jak zmienić pasek adresu bez ponownego ładowania? Wiem, że mogę zmienić anchor (#wall) używając JS, ale querystring (? V = wall), jak?

Answer 1

Używa nowej funkcji HTML5: history.pushState(), aby umożliwić maskowaniu strony pod innym adresem URL niż ten, z którego została pierwotnie pobrana.

Wydaje się, że jest to obecnie obsługiwane tylko przez WebKit, dlatego też reszta z nas widzi ?v=wall#!/facebook?v=info zamiast ?v=info.

Funkcja umożliwia dynamiczne ładowanie stron do zakładek, wymienianie itp. Między obsługiwanymi przez JS i nie obsługującymi JS programami użytkownika. Ponieważ jeśli jako użytkownik JS łączysz kogoś z ?v=wall#!/facebook?v=info, a jego przeglądarka nie obsługuje JS i XMLHttpRequest, strona nie będzie dla nich działać.Model #! jest również używany jako wskazówka dla wyszukiwarek do pobierania wersji innej niż AJAX.

Answer 2

Nie mam Facebooka, więc nie mogę sprawdzić. Ale mam 95% pewności, że musi to być pełne żądanie strony, pasek adresu jest nieodpisywalny, ponieważ byłoby to bardzo przydatną funkcją do absurdowania stron phishingowych (zamiast http://fakeonlinebank.com przepisać na http://yourtrustybank). Prawdopodobnie tak szybko, że twoja przeglądarka wydaje się tylko ładować tę część?

Ale jestem ciekaw, czy ktoś mnie poprawić w tej sprawie, ponieważ oznaczałoby to mają odpowiedź Ty chcesz usłyszeć;)

Answer 3

@Snoob - Byłbym wdzięczny, gdybyś przyjął @bobince's answer zamiast tego, był na dobrej drodze do omówienia szczegółów. Ponieważ nie mogę tego usunąć/usunąć, dopóki nie zostanie ona zaakceptowana, zaktualizuję ją tak, aby była jak najbardziej poprawna.

---

Obecnie to WebKit (Chrome, Safari, itp) specyficzna sprawa widzisz (lub raczej, nie widząc), jak @bobince punktów w innych przeglądarkach można zobaczyć prawdziwe URL w pasku:

http://www.facebook.com/facebook?v=wall#!/facebook?v=info\ 

Gdzie Chrome tylko pokazuje:

http://www.facebook.com/facebook?v=info 

To ma sens, given this is how you make AJAX Content crawlable with the Google search engine, więc ich przeglądarka rozpoznaje skąd pochodzi również treść.

Korekta od specyfiki: przeglądarek Webkit wykazują skróconego URL facebook chce za pomocą HTML 5 Historyczne you can see the code here (Spójrz na HistoryManager) w tym przypadku konkretnie oni używają .replaceState() zastąpić URL Poszedłeś z bezpośrednim dostępnym.

Uwaga: Ta odpowiedź może nie mieć później (specyficzny nieco WebKit), a inne przeglądarki obsługują HTML5 dysponuje coraz to może szybko stać się nieaktualne.

Answer 4

Dla programistów MooTools zalecam wypróbowanie wtyczki cpojer: mootools-history, która zapewnia wsparcie dla interfejsu API historii macierzystej, o ile jest dostępna, z możliwością powrotu do skrótów.