如何修改這個URL？

Question

任何人都可以告訴網站http://www.outsharked.com/imagemapster/default.aspx?what.html如何以這種方式工作？在不加載/重新加載頁面的情況下修改網址。我認爲這不是由html5完成的。因爲它在不支持html5的IE6中工作。

Answer 1

我創建了該網站。評論者是正確的，它使用Javascript來更改URL。沒有任何關於IE6的導航工作方式，這種瀏覽器支持必要的客戶端功能來完成這種事情。基本功能包括：

1. 在導航捕獲click事件，並通過加載AJAX
2. 更新內部內容的URL，以反映工作直接URL目標。

這些鏈接也是有效的錨鏈接，在沒有Javascript的情況下，鏈接將轉到同一頁面（但加載整個事物）。這是您的基本AJAX網站設置，只有一點不同。這是常見的做法是使用一個網址，像這樣的AJAX /單頁網站：

http://mysite.com/home#somepage 

甚至只是

http://mysite.com/#somepage

凡＃標籤部分代表實際的頁面的用戶導航到。如果有人直接訪問該網址，例如從該網站外部，網站將在頁面加載後使用Javascript來加載基於標籤的正確內容。這意味着內部內容可能會稍微延遲以反映正確的頁面，因爲在從瀏覽器加載初始頁面以通過AJAX獲取內容內容之後，它必須運行另一個請求。

我試圖通過創建一個完全使用和不使用Javascript的設置來避免這種情況。如果您直接訪問網站中的網址，例如http://www.outsharked.com/imagemapster/default.aspx?faq.html，您會注意到它會直接加載內容。即使Javascript已禁用，此URL也可以使用。您無法使用＃標籤實際執行此操作，因爲哈希標籤內容不是發送到服務器。只有客戶端知道URL中的hashtag之後的內容。這就是爲什麼我使用查詢字符串來表示內部頁面。

此網站架構當時是一種實驗。它工作得很好，但代碼不是很好，我沒有做任何其他的事情，而且我確信還有其他更好的實現/測試/功能齊全的框架可以完成相同的工作事情。

但它可能不是一個創建基本AJAX導航設置的堅果和螺栓的壞例子，作爲一個學習工具，因爲它非常簡潔，並且還可以進行HTML5歷史導航（例如，所以後退按鈕適用於現代瀏覽器）。