HTML5新添加了兩個api分別是pushState和replaceState，DOM中的window對象通過window.history方法提供了對瀏覽器歷史記錄的讀取，可以在用戶的訪問記錄中前進和后退，我們可以開始操作這個歷史記錄堆棧。

實例一、通過pushState修改URL

通過這句代碼可以無刷新改變URL

window.history.pushState({},0,url);

DEMO代碼：

截圖：

在input輸入框內輸入haha.html點擊“點擊無刷新改變url”按鈕即可實現

實例二、利用ajax配合pushState翻頁無刷新的動作

主要在ajax發起數據請求，在數據頁面響應后利用pushState修改分頁參數，達到模擬真實翻頁效果，并且寫入歷史表達到后退時能恢復上一頁的數據

demo-page.html代碼：

shuju.php代碼：

DEMO貼圖：

沒有點擊之前

點擊后，發起ajax請求page=2數據

ajax返回后通過pushState修改URL，請看截圖地址欄已經是page=2，頁面沒有刷新，因為firebug控制臺中的ajax請求記錄還在

點擊后退箭頭，恢復上一頁的數據

最后

雖說這兩個html5新加api能實現無刷新修改URL，但js畢竟是前端，為了安全是不能跨域的。比如本例中的demo域是在www.qttc.net下，不能修改到www.xxx.com域下。有不少人說這個特性解決了ajax局部刷新區域不容易被蜘蛛人抓取的問題，本人沒有親自驗證，但卻有可行之勢，感興趣的童鞋可以嘗試下

總結

以上是生活随笔為你收集整理的快速修改HTML5,HTML5无刷新修改URL(示例代码)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。