如何在復雜的HTML5和JavaScript應用程序中修改瀏覽器歷史記錄

態你不喜歡活潑的標題嗎？ 考慮一個複雜的應用程序，例如WebMail客戶端。從本質上講，這是一個在單個HTML頁面上運行的複雜JavaScript程序。用戶加載URL，並提供電子郵件列表。他們單擊標題，並使用Ajax檢索電子郵件內容並顯示。他們現在想返回電子郵件列表；他們做什麼？ … …單擊瀏覽器的後面按鈕。 砰。該應用程序關閉並返回到訪問應用程序之前查看的頁面。或者，如果它是一個新的瀏覽器選項卡，則禁用了後按鈕，無法單擊。 所以我們有問題。我們的WebMail客戶端不支持大多數用戶了解的一個瀏覽器控制。有解決方案。有些涉及更改URL中的哈希標記（#name），以便保留狀態。它不是完美的，但是在所有瀏覽器中都可以使用。 幸運的是，問題已通過HTML5 History.pushstate解決了 和history.replacestate方法與窗口。 嘗試history.pushstate（）演示頁面… 該技術簡單令人耳目一新：

1. 當狀態發生變化時，例如用戶打開電子郵件，history.pushstate（）已傳遞狀態信息並執行。這啟用了返回按鈕，但是 - 重要的是 - 不會將用戶從頁面上移動。
>
2. >您可以根據需要運行歷史多次，或使用history.replacestate（）。
>用戶單擊（或向前）時，窗口。處理程序功能可以檢索關聯的狀態並顯示適當的屏幕。
3. 缺點？忘記兼容性，直到V10到達。如果您需要支持IE9及以下，則有許多墊片，包括histry.js和html5歷史上的api 。 讓我們寫一些代碼。假設您剛剛顯示了AJAX請求的結果：
在哪裡：

// Ajax request
...
// display result
...

// modify history
history.pushState(obj, title, url);

obj是任何JavaScript對象。您可以使用它來保留狀態信息，例如{“ view”：“ emailcontent”，“ item”：123};

標題是一個可選標題

URL是可選的URL。 URL可以是任何東西 - 瀏覽器不會跳到該頁面，但是如果用戶重新加載頁面或重新啟動其瀏覽器，則>可以>。在大多數情況下，您需要使用參數或哈希名稱，例如？ view = emailContent＆item = 123;您的應用程序可以在啟動時分析這些價值，然後返回同一地點。

> history.replacestate（）具有相同的參數，僅當您想用新狀態替換當前狀態時才使用。 現在，您需要一個處理程序功能，該功能在窗口popState事件啟動後，瀏覽器的背面或下一個按鈕要單擊時運行：

// Ajax request
...
// display result
...

// modify history
history.pushState(obj, title, url);

可以使用document.location（document.location.search and document.location.location.hash）確定URL位置 分別返回參數和哈希名稱）。 由PUSHSTATE（）或替換為（）設置的歷史態對像是從事件對象的狀態屬性中獲得的。您可以使用信息顯示適當的屏幕。 嘗試history.pushstate（）演示頁面… 單擊“歷史記錄”按鈕幾次，然後返回以查看日誌中會發生什麼。 非常有用。您是否在Web應用程序中遇到了後退和下一個按鈕問題？

經常詢問有關JavaScript歷史PUSHSTATE

的問題（常見問題解答）

> JavaScript歷史記錄PushState的主要功能是什麼？它是歷史API的一部分，它使您可以添加歷史記錄條目。當您要創建一個可以更改URL而不重新加載頁面的單頁應用程序時，這特別有用。即使用戶在瀏覽器的前後和後部按鈕中導航時，它也有助於維護用戶體驗和應用程序的狀態。

JavaScript歷史記錄如何工作？

JavaScript歷史記錄PUSHSTATE PUSHSTATE PUSHSTATE Works Works Works Works Works Works Works Works Works Works Works Works Works通過使用三個參數：狀態對象，標題（當前大多數瀏覽器忽略）和一個URL。調用PushState方法時，它將在瀏覽器的歷史記錄堆棧中創建一個新的歷史記錄。此新條目與指定的狀態對象和URL關聯。當用戶導航到此新條目時，POPSTATE事件將觸發，並且狀態對象將傳遞回應用程序。

>

我可以在所有瀏覽器中使用JavaScript歷史記錄pushstate嗎？所有現代瀏覽器都得到了歷史PUSHSTATE的支持。但是，Internet Explorer 9和更早版本中不支持它。因此，如果您正在開發較舊瀏覽器的應用程序，則可能需要使用基於哈希的URL的多填充或後備。 >

> javaScript中的PushState和替換方法之間有什麼區別？它們之間的主要區別在於，PushState創建了一個新的歷史記錄條目並將其添加到歷史記錄堆棧中，而替換為當前的歷史記錄條目而無需在堆棧中添加一個新的歷史記錄。

>我如何處理POPSTATE事件在JavaScript？

中，每當活動歷史記錄條目更改時，POPSTATE事件就會觸發。如果歷史記錄條目是由Pushstate創建的，則將與該條目關聯的狀態對像傳遞回該應用程序。您可以通過將事件偵聽器添加到窗口對像中並定義當事件啟動時將執行的函數來處理POPSTATE事件。

>

> javascript歷史記錄pushstate中的狀態對像是什麼？ >狀態對像是與歷史記錄條目關聯的JavaScript對象。該對象可以包含您要與歷史記錄條目相關聯的任何類型的數據。當用戶導航到歷史記錄條目時，狀態對象會傳遞回該應用程序，允許您恢復應用程序的狀態。

>

我可以更改URL而不使用JavaScript歷史記錄pushstate重新加載頁面？

> JavaScript歷史記錄PushState在單頁應用程序中的作用是什麼？ >

在單頁應用程序中，JavaScript歷史記錄PushState在維持用戶體驗中起著至關重要的作用。它允許您更改URL以反映應用程序的當前狀態而無需重新加載頁面。這意味著用戶可以使用瀏覽器的前後按鈕在不丟失應用程序狀態的情況下瀏覽應用程序。

>

>我如何使用JavaScript歷史記錄pushState創建導航系統？使用JavaScript歷史記錄PushState通過為每個導航操作添加歷史記錄條目來創建導航系統。當用戶導航到歷史記錄條目時，您可以使用與該條目關聯的狀態對象來還原應用程序的狀態。這使您可以在不重新加載頁面的情況下創建無縫的導航體驗。

>使用JavaScript歷史記錄PushState有什麼局限性？它有一些局限性。例如，Internet Explorer 9和更早版本中不支持它。另外，它只能為相同的來源添加歷史記錄條目，這意味著您不能使用它來為不同域中添加歷史記錄條目。

以上是如何在復雜的HTML5和JavaScript應用程序中修改瀏覽器歷史記錄的詳細內容。更多資訊請關注PHP中文網其他相關文章！