window.history.pushState與ajax實現無刷新更新頁面url

本文轉載自查看原文 2016-11-30 15:57 2069 JavaScript

ajax能無刷新更新數據，但是不能更新url

HTML5的新API： window.history.pushState, window.history.replaceState

用戶操作history，點擊前進后退按鈕會觸發popstate事件。

這些方法可以協同window.onpopstate事件一起工作。

改變url的demo

本頁是foo.html，url改變成bar.html，內容卻不變

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <button onclick="changeUrl()">按鈕</button>
        
        <script>
        function changeUrl() {
            var stateObj = {foo: 'bar'};
            window.history.pushState(stateObj, 'page 2', 'bar.html'); // 這將讓瀏覽器的地址欄顯示http://mozilla.org/bar.html，但不會加載bar.html頁面也不會檢查bar.html是否存在。
        }
            
        </script>
    </body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用ajax和window.history.pushState無刷新改變頁面內容和地址欄URL AjAX請求后台，無刷新更新頁面 Ajax實現無刷新頁面提交 window.history.go(-1)返回且刷新頁面使用onhashchange和hash實現無刷新頁面 window.history.go(-1)返回且刷新頁面點擊返回上一層 Ajax寫分頁查詢（實現不刷新頁面）不使用Ajax，如何實現表單提交不刷新頁面用ajax技術實現無閃爍定時刷新頁面 history.pushState 實現瀏覽器頁面不刷新修改url鏈接