2010-12-06 42 views
9

我在瀏覽GitHub.com時,我注意到在查看存儲庫的源代碼時,您單擊一個文件,源代碼幻燈片和URL更改,但它不會顯示爲頁面已刷新。有誰知道這是如何完成的?我已經看到用#符號完成了這個工作,尤其是在創建Flash網站時,但是我從來沒有見過這樣做,就像GitHub所做的那樣,沒有#。如何重寫URL而不刷新,就像GitHub.com

下面是一個例子: https://github.com/jquery/jquery

單擊文本文件的一個像.gitattributes然後在麪包屑點擊jQuery來看看我的意思。

+3

它導航到這裏的新頁面... – cdhowie 2010-12-06 22:49:58

+0

做一個更多的研究,它看起來像這可能是一個webkit/Safari的唯一功能。 – Sandro 2010-12-06 22:51:10

+0

在某些瀏覽器上,頁面重繪稍微不突兀,所以看起來更平滑,但我認爲它正在加載新頁面。 – bmb 2010-12-06 22:52:38

回答

8

XMLHttpRequest用於Chrome/Webkit瀏覽器的客戶端,用於在不刷新頁面的情況下獲取服務器端資源,並且可以動態地加載內容,並且可以在插入內容期間掛接動畫。

我不確定爲什麼只有Chrome瀏覽器是由ajax定位的,因爲通常當ajax以相同的方式應用時(如twitter),散列標記會發生變化。

對於動態變化的網址,我相信這一切都是location.href更新。再次想到,它可能只是一些新的HTML5功能,只有Chrome支持。

+2

AJAX部分並不是我真正感興趣的部分,我更感興趣的是URL如何改變而不刷新頁面。 – Sandro 2010-12-06 22:52:36

13

Github上使用window.history.replaceState()

Here你可以看到他們是如何做到這一點

2

我發現這篇文章這也解釋了這些HTML5特性 - window.history.pushState()的window.history .replaceState()和onpopstate()事件:http://www.spoiledmilk.dk/blog/?p=1922

正如文章中提到的那樣,Flickr也在幾個地方使用了這種技術。

相關問題