HTML5歷史API實際URL不存在

Question

我正在學習HTML5歷史API。以下是我能夠實現的。

我有一個頁面「a.html」，其中包含所有內容和「b.html」的鏈接。當我點擊鏈接時，幾乎所有的內容都保持不變，只是圖像發生變化。所以我所做的是編寫一個點擊處理程序，並避免加載「b.html」[實際上b.html在我的服務器中不存在]。我創建一個XMLHTTPRequest並只提取需要替換的內容（放在一個文件調用「xmlres.html」中，只包含一個img標籤），並使用pushstate（）更新url。

一切工作正常。但問題是，如果用戶試圖複製當前網址「appname/b.html」並在另一個頁面中打開，則找不到資源，因爲我還沒有創建「b.html」。我不想再用全部內容創建b.html，有沒有解決這個問題的解決方法。

我應該爲URL編寫任何事件偵聽器，還是應該如何繼續。任何有關這方面的見解都會很有幫助。

Answer 1

我想你是在談論單頁面應用程序，俗稱SPA。

基本上這個概念的意思是你可以說一個index.html，裏面有一個默認隱藏的頁面部分，通過javascript和休息導向的服務來管理和處理基於用戶交互的每個部分的內容。

通過使用hashtag進行導航，單頁應用程序是衆所周知的，在提供的小提琴中，這是通過散列符號完成的。

你可以很容易地通過此屬性訪問哈希值：

console.log(window.location.hash); 

這裏是一個fiddle I made，頁面轉換是全功能的，給我一點，包括歷史API功能。

下面是這個小提琴的作用：

• 如果您訪問的基本URL會顯示索引部分。
• 如果您通過url訪問基礎網址，它將顯示索引部分。
• 如果您訪問/1#sectionname如果該部分可用，它將顯示它，否則它會告訴您，您嘗試訪問的部分不可用，因此它將顯示未找到的消息。
• 通過jQuery支持歷史api。
• 通過頁腳鏈接導航。

請耐心等待，因爲我添加了歷史記錄功能並讓我知道您是否需要更多詳細信息。

這是wikipedia page for Single Page Applications萬一你想多讀一點。

編輯：

• Here is the full fiddle。

我也做了一個blog post about it

希望它能幫助！

Answer 2

這裏的描述（在文章底部），您遇到的現象的文章： http://www.sitepoint.com/an-overview-and-usage-of-javascript-history-api/

本質上講，這歸結於具有理解，當一個404網址是做什麼特殊的服務器功能直接要求。引用的文章顯示瞭如何使用PHP完成此操作。其他應用程序服務器，例如Node，Vertx，Servlet Spec'd服務器都可以讓您特別訪問URL處理，從而可以確定404是否會發生，並在404時給予特殊控制。這是一個沒有被提及的歷史API的特例。還有一些其他問題可能因此而出現。例如，當使用這種技術時，當物理資源和SPA資源不存在時，提供404可能仍然是一個好主意。虛擬資源是在SPA代碼庫中發生歷史API/URL路由後出現的那個頁面。這當然會假定服務器知道SPA內的路由如何工作。