使用HTML5 History API處理哈希

Question

我在這里使用history.js插件： https ： //github.com/browserstate/history.js/用於處理我的應用程序中的HTML5歷史記錄。 我想處理HTML5和HTML4的版本（使用散列后備）。

你可以在這里看到演示： http ： //dev.driz.co.uk/history45/

---

問題1

當一個人訪問帶有哈希的網址時（如果沒有點擊網站上的鏈接），我如何根據哈希加載正確的內容？因為服務器將無法理解代碼是什么，我不想必須通過檢查哈希是否存在然后通過AJAX調用內容來使請求加倍。 例如： http://dev.driz.co.uk/history45/#about.php ：//dev.driz.co.uk/history45/#about.php不會加載about.php內容。

更新：

我在這里看到了一些例子： https ： //gist.github.com/balupton/858093這似乎涵蓋了加載正確的內容（甚至是優化版本）。 但我正在努力讓它與我的HTML5版本結合使用。 查看源： http ： //dev.driz.co.uk/history45/它只在個人點擊鏈接而不是頁面加載時運行，這是原始問題。

更新2：

在這里嘗試了一個例子： http ：//dev.driz.co.uk/history4/#/contact.php，使用源代碼中的代碼段來獲取要在contact.php內容中加載的內容，但是不起作用......？ 但根據這篇文章： https ： //github.com/browserstate/history.js/wiki/Intelligent-State-Handling#wiki-why-the-hashbang-is-unnecessary這段代碼應該是AJAX加載正確的內容如果它有哈希值。 有什么想法嗎？

---

問題2

如何強制root上的/#/並使用`＃/'為所有URL添加前綴

目前，如果您嘗試通過HTML4瀏覽器中的鏈接訪問頁面，您最終會得到如下奇怪的網址：

http://dev.driz.co.uk/history45/#contact.php和http://dev.driz.co.uk/history45/#./

代替：

http://dev.driz.co.uk/history45/#/contact.php和http://dev.driz.co.uk/history45/#/

---

如果我從內頁開始：

http://dev.driz.co.uk/history45/contact.php並選擇一個鏈接然后我最終得到： http://dev.driz.co.uk/history45/contact.php#about.php ： http://dev.driz.co.uk/history45/contact.php#about.php什么時候它應該是： http://dev.driz.co.uk/history45/#/about.php ： http://dev.driz.co.uk/history45/#/about.php

Answer 1

當一個人訪問帶有哈希的URL時（如果沒有點擊網站上的鏈接），如何根據哈希加載正確的內容因為服務器將無法理解代碼是什么

服務器不會看到#或之后的任何內容

並且我不想通過檢查哈希是否存在然后通過AJAX調用內容來使請求加倍。

您唯一的其他選擇是重定向（通過使用JavaScript設置location ）到您在歷史API可用時使用的URL。

如何在root上強制/＃/？

如果不支持歷史記錄API，則必須重定向到主頁（再次通過設置location ）。

---

我認為，如果他們使用的瀏覽器不支持歷史API（這可能意味着Windows XP和IE 8），那么他們可以獲得非Ajax后備，而且我永遠不必處理哈希黑客攻擊。

Answer 2

如果您只想強制所有瀏覽器（HTML4 / 5）都使用哈希值，那么您可以使用更改init中的History.js選項

History.options.html4Mode = true 

但是，您可能還需要考慮使用jQuery中的$ .address功能，它可以使用哈希附加您想要的任何新URL。

同樣在$ .address方法中，如果用戶第一次訪問該站點，您還可以根據其初始URL確定重定向用戶的位置：比如說，讓用戶訪問帶有http://www.site的URL .COM /＃/ about.php

然后，您可以擁有一個函數，該函數根據URL更改偵聽對任何更改的任何更改

$.address.change(fn)

REF： http ： //www.asual.com/jquery/address/docs/

UPDATE

我發現這里可能適用的一件事是，如果你有一個單擊事件處理程序，它通過推送一個新狀態來表現，即使你當前在同一個頁面上，歷史記錄js會將相同的url追加到現有的結尾處。帶有哈希的URL

例如，如果在關於頁面（並且您的州是“約”）並且您單擊關於鏈接 - 您的URL將從http://www.site.com/about更改
至
http://www.site.com/about#/about

為了省去麻煩，在該按鈕上有一個if語句，用於檢查你的歷史狀態是否為“about”，如果沒有，則pushState“關於”

例如

$('.about.btn').on('click', function(e){
  if(History.getState().data.State != "About") {
    e.preventDefault();
    History.pushState({"State": "About"}, null, "/about"); 
  }
})