「重定向」頁面沒有刷新（Facebook的照片風格）

我想要像它在Facebook上，當用戶瀏覽這些照片做實現內容瀏覽。我想大家都熟悉那張照片瀏覽器，你可以點擊「下一張」和「上一張」，然後立即獲取下一張或上一張照片（也可以使用箭頭鍵進行導航）。「重定向」頁面沒有刷新（Facebook的照片風格）

當您單擊例如，你會注意到網頁不刷新「下一步」 - 唯一的內容。起初，我認爲這是使用純ajax調用完成的，它只刷新了「內容」，在這種情況下，圖像，描述和評論。但後來我注意到，我的瀏覽器的「位置」工具欄中的URL也被更改了！我試圖檢查這個使用Firebug，並發現，當你點擊「下一步」只下載的下一張照片，我仍然不知道從評論&圖像元數據（描述，時間，標籤，...）是加載。

能有人請解釋這個技術是如何實現的 - 無需刷新頁面頁面URL變化（甚至沒有網頁「閃爍」，如果它從緩存刷新）。我知道如何使用Ajax來改變網頁內容，但該網頁的網址保持不變所有的時間。如果我點擊「刷新」按鈕，我會再次獲得第一頁。但不是在Facebook上，因爲即使「window.location」每次都改變而沒有實際的重定向。

我注意到的另一件事是，底部工具欄（應用程序，聊天，...）是「總在最前面」。即使更改的頁面，這個工具欄不刷新，始終走在最前面 - 它甚至不「眨眼」一樣，刷新（無論是從網絡服務器或從本地緩存）其他頁面。我想這是與上述相同的技術 - 某種「假」重定向或什麼？

答案是pushState的

if (window.history.pushState) 
    window.history.pushState([object or string], [title], [new link]);

你會微笑:)

來源

2010-10-29 Jeaf Gilbert

對於它的價值[（在IE8 +，其餘的大多數支持） History.js]（https://github.com/balupton/History.js）提供相同的HTML5 API而正常降解不支持它的任何瀏覽器（包括用於數據和標題，及replaceState功能的支持）。使用這將意味着你不必爲IE9的變化而改變你的代碼。 – balupton 2011-02-09 15:07:20

我試圖通過Facebook的圖像改變，這是我所看到的：

在Firefox ：

頁面的URL沒有改變。只有散列正在改變。 This is a technique used to allow crawlers to index the content。什麼情況是這樣的：

用戶點擊「下一步」
JS加載與標籤，評論，等下一個圖像，並取代舊的內容與他們。
JS改變散列以對應的新的圖像

網址看起來像這樣： http://www.facebook.com/home.php?#!/photo.php?fbid=1550005942528966&set=a.1514725882151300.28042.100000570788121&pid=3829033&id=1000001570788121（注意散列）

至於第二個問題，這僅僅是一個以上的技術的益處。當你在Facebook上時，頁面很少被刷新。只有哈希值被更改，以便您可以將鏈接發送給其他人，並且抓取工具可以索引內容。

在谷歌瀏覽器：

~~看來，鉻hassome方式變更網址，而無需刷新~~的頁面。它通過使用window.history.pushState來實現。閱讀關於它here。

的URL看起來像這樣：http://www.facebook.com/photo.php?fbid=1613802157224343&set=a.1514725288215100.28042.1000005707388121&pid=426541&id=1000001570788121（注意，不出現亂碼這裏，但仍與該URL圖像改變一起）

在Epiphany：

頓悟不會更改URL時圖像改變。

的URL看起來像這樣：http://www.facebook.com/photo.php?fbid=1441817122377521&set=a.1514725882215100.28042.1000005707848121&pid=3251944&id=1000200570788121（不出現亂碼，並且改變圖像時網址保持不變）

（沒有其他瀏覽器來驗證現在）

來源

2010-10-29 07:19:42

同意。 Thx爲解釋，我將添加有關pushState的代碼。 – 2010-10-29 08:26:20

也許你回答了這個時候，他們使用的哈希值發生變化加載新的圖像，但現在當你點擊下一步按鈕，本身已被改變的URL，但不會刷新。即使您點擊主頁網址更改中的熱門新聞，但頁面也不會刷新。我真的很好奇它是如何工作的。 – Sridarshan 2011-07-07 06:21:26

@UberGeek AFAIK火狐（我假設你談論它）在新版本 – 2011-07-07 07:31:14

您可能注意到了該網頁的網址保持不變。但是，更改內容是頁面散列（URL中的＃之後的部分）。

你需要的東西是這樣的：http://code.google.com/p/reallysimplehistory/

來源

2010-10-29 07:26:46

這是不正確的'window.history.pushState'支持。圖像URL出現像'HTTP：//www.facebook.com/photo.php FBID = 135122293393816＆設置= t.1575828580＆PID = 8182864＆我的鍍鉻地址欄的ID = 15752828580'並沒有''＃中呢？。 – 2010-10-29 07:30:47

@Gabi：Chrome支持window.history.pushState，因此在Chrome中可以更改URL欄而不強制重新加載。在其他瀏覽器（Firefox，IE）中，URL欄只有通過該附加數據的變化（或檢索它）從在URL的結尾散列標籤後window.location.hash方法可變的。 – 2010-10-29 08:01:43

這裏沒有提到的一個技術是window.onhashchange（）方法，他們可能使用

來源

2011-11-02 22:02:11 Jordan

我相信這正是發生的事情而非其他方式。下一個和上一個鏈接只是改變散列，JavaScript代碼反應並加載相關照片。 – Tallmaris 2012-11-07 22:16:17

「重定向」頁面沒有刷新（Facebook的照片風格）

回答

相關問題