如何在瀏覽器中更改網址而不導航離開頁面？

Question

我正在編寫一個複雜的AJAX應用程序，整個站點都有乾淨的URL。目前，PHP爲每個頁面創建基本佈局，但是當用戶點擊一個鏈接時，我不希望從每個頁面離開，並且我不希望在URL中有一個哈希值，因爲它贏得了「與網站的其他部分保持一致。我知道這已經在網站上產生了負載，並且似乎是相當普遍的問題，但我想知道是否有一種簡潔的HTML5方式，即使它在技術上保持不變，也只是在地址欄中更改網址頁。

Answer 1

您可以使用history.pushState來完成，但只能在支持它的瀏覽器中使用。只需在瀏覽器的JavaScript控制檯中嘗試以下行。

history.pushState({},"URL Rewrite Example","https://stackoverflow.com/example") 

更多關於在The pushState() method (Mozilla Developer)

類似問題How do I, with JavaScript, change the URL in the browser without loading the new page?

Answer 2

正如其他人所指出的，HTML5的history.pushstate是要走的路。嘗試瀏覽github上的回購以查看它的行動（https://github.com/visionmedia/express）。

故障是唯一支持history.pushstate的IE版本，IE10，這有點糟糕。

大量網站使用hashbang＃！ URL（例如Twitter）（例如https://twitter.com/#!/Sironfoot）。 hashbang是由搜索引擎同意的URL模式，以便他們仍然可以拖拉和索引一個大量使用Ajax的網站（更多信息請參閱http://code.google.com/web/ajaxcrawling/docs/specification.html），以便您可以轉到該路線。

唯一的另一種方法是對支持瀏覽器的瀏覽器使用history.pushstate，對於不支持的瀏覽器則使用full-page刷新。