2012-01-08 60 views
0

我從來沒有使用HTML5 onpopstate/pushState方法。不過,我正在構建(或已經構建)一個網站,在該網站中滾動頁面將地址欄中的散列值更改爲視口中當前顯示元素的ID。所以我在單頁面佈局上有一種瀏覽歷史和深層鏈接。使用hashchange的網站 - 查詢popstate事件是否可用?

我仍然通過設置top.location.hash和使用hashchange()函數來執行此操作。現在我遇到了這個新的HTML5 popstate/onPush狀態方法,並認爲這將是相互衝突的...

首先:使用這種方法的好處是什麼popstate/onPushState?使用這個比使用top.location.hash的經典方式更好嗎?表現更好嗎?

如果是這樣,有沒有辦法查詢或找出當前瀏覽器是否支持此方法?因此,我可以在現代瀏覽器中使用這些方法,並在舊版瀏覽器中以舊方式回退。

這可能嗎?如果是,比如何?

回答

0

你可以做更多的事情與HTML5歷史API。

您可以替換歷史記錄中的當前項目或創建一個新項目。使用hashtag解決方案,您只能添加新的解決方案。

當您創建或替換歷史記錄條目時,您還可以更改url並傳遞將在popstate中返回給您的javascript對象,該對象可以包含任何數據。

一個很好的使用這個API的例子是github(http://www.github.com)。開始時,他們發送完整頁面一次,之後他們更改頁面和網址以匹配您在首次請求時加載的新頁面。 (這意味着刷新作品非常漂亮)

,如果你想測試歷史的支持,你可以做到這一點是這樣的:

if (history && history.pushState) 
+0

'使用hashtag解決方案,您只能添加新的。「 - 您可以使用'location.replace' – Quentin 2012-01-08 09:25:33

1

使用popstate/onPushState方法的好處是什麼?

您將得到不依賴於JavaScript的真實URL以發揮作用。

如果是這樣,有沒有辦法查詢或找出當前的瀏覽器是否支持此方法?

if (history && history.pushState) 

...或者只是使用a compatibility library

+0

現在是否真的有onpushState事件可用?我無法在互聯網上的任何地方找到有關它的信息。你能否指出一些相關的鏈接,我可以在這裏找到關於它的更多信息及其與當前瀏覽器的兼容性? – Aklin 2012-08-28 06:45:44

+0

事件是popstate。 https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history – Quentin 2012-08-28 06:50:26

+0

謝謝! popstate存在我知道,我在詢問onpushstate。對於我的用例,我需要爲pushstate事件分配一個回調。 – Aklin 2012-08-28 06:57:32