單頁面應用程序中的後退按鈕處理？

Question

類似的問題here已被注意到！

我有一個完全基於DHTMLX工具包（偶然的神話般的東西）的SPA。一個嚴重的用戶體驗問題是後退按鈕處理：沒有。

他們的論壇推薦'任何js路由庫來處理URL散列中的應用程序狀態並將其恢復。

我很困惑，因爲SPA只有最簡單的HTML，完全是Javascript，並且通過WebSockets進行大多數通信......這是否意味着我必須在每個按鈕上單擊/按鍵存儲狀態？

所以，...

1. 是否面板對最佳實踐的建議？
2. 有一個現有的庫，將做到這一點？
3. 如果說圖書館的例子很簡單，任何人都可以提供一個基本的方法嗎？

非常感謝

Answer 1

DHTMLX是建設SPA的一個偉大的框架。像所有SPA一樣，後退按鈕只需將用戶從應用程序中取出即可。用戶也無法收藏任何內容。

所以你想要做的就是使用javascript的pushState()這將允許你控制網址。

例如，假設您展示一個搜索屏幕去記錄。用戶輸入搜索條件並按下搜索。您通過ajax帶來結果並更新網格。然後用戶選擇該行，然後轉到詳細信息頁面（此處爲典型的搜索功能）。

在這一點上，你可能需要使用pushState()的網址更改爲類似：
http:/me.com/search/23432

這將允許用戶書籤的頁面。然後，當用戶離開詳細信息頁面時，請使用pushState()並將url設置爲http:/me.com/search

因此，您可以完全控制網址。

您需要學習的下一件事是popState()。這個函數在URL改變時被調用。所以假設用戶按書籤去「23432」。 popState()將被調用，你會作出相應的反應。

這基本上是簡而言之：pushState()和popState()。

一些舊瀏覽器不會對pushState/popState做出反應。有些庫可以用來處理使用url散列的舊瀏覽器。我不太熟悉他們，因爲我只支持html5瀏覽器。