使用HTML5歷史記錄完整AJAX導航

我想使用HTML5 window.history功能在我的網站上實現完整的AJAX導航。我找到了一個demo which shows an implementation of window.history，其中一些內容被傳遞給可以回調並顯示在textarea中的歷史記錄。我想遵循並擴展該方法：使用HTML5歷史記錄完整AJAX導航

當點擊鏈接時使用AJAX更改整個頁面內容。
加載新內容之前，將當前URL的歷史頁面的全部內容保存。
加載新內容，更改URL並將新內容保存到歷史記錄。

這樣一來，當用戶按下以前和未來瀏覽器按鈕，頁面內容也會相應而沒有觸發一個HTTP請求，給用戶帶來非常流暢的基於AJAX的經驗更新。

問：你能預見使用這種方法的潛在問題嗎？（我特別關心瀏覽器內存，因爲我把整個頁面保存到歷史記錄中）

來源

2012-03-21 Max

我會親自告誡你，因爲你正在重新發明輪子。我看到很多人嘗試這樣的事情，很少有人工作得很好。也就是說，這裏有一些要考慮的事情：

是的，內存會增長，但取決於網站的廣度和源代碼的複雜性，您可能會沒事的。
您的網站仍應該完全沒有Javascript或AJAX調用功能。您應該始終生成最終加載正確頁面的URL，以便用戶可以正確複製+粘貼鏈接。（這是一個很大的自制的解決方案之旅了。）
使用Modernizr的測試對於歷史的支持，這樣你就不會結束在舊的瀏覽器破事（IE8）

來源

2012-03-21 15:33:20 zim2411

-'About內存增長：'我會做一些測試，看看瀏覽器如何與此行爲。也許存儲壓縮的數據會有所幫助（儘管它會將問題轉移到CPU使用情況）。 -'關於非AJAX功能'：關閉課程。 -'關於Modernizr'：你爲什麼推薦這個與其他庫比如'jQuery'的任何理由？ – Max 2012-03-22 08:33:46

Modernizr更多地確保您的網站在沒有AJAX加載的情況下工作，它不是jQuery的替代品。您可以測試對歷史API的支持，並在不支持它的瀏覽器中執行不同的操作。回到內存：我假設你正在緩存HTML源代碼，對於複雜的頁面，它可能在1KB到50KB之間（或更多）。這是一個非常簡單的計算，以確定它的增長速度。對於桌面瀏覽器來說，幾MB可能會很好，但可能會推動移動用戶。 – zim2411 2012-03-22 16:25:54

與移動用戶達成一致：我打算爲他們提供更輕量級的網站，以解決這個問題。 – Max 2012-03-23 07:12:41

使用HTML5歷史記錄完整AJAX導航

回答

相關問題