ajax载入与浏览器历史的前进与后退

Gkuankuan

于 2017-11-04 12:43:24 发布

阅读量265

点赞数

分类专栏： js 文章标签： ajax

本文链接：https://blog.youkuaiyun.com/qq_35652217/article/details/78442794

版权

js 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用Ajax实现页面无刷新加载，并通过history.pushState和history.replaceState解决浏览器前进后退的问题。文中提供了具体实现代码，使用户在进行Ajax请求时能够保留浏览器历史记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ajax载入与浏览器历史的前进与后退

使用到的知识点：

popstate
history.pushState
history.replaceState

Ajax可以实现页面的无刷新操作——优点；但是，也会造成另外的问题，无法前进与后退!（前进后退无法重现上一次操作）；

通过以下代码保存每次请求的参数即可实现浏览器后退操作；

<script>
    var num = 0;
    var str;
    document.addEventListener("click",function() 
        history.pushState({num:num}, "",window.location.href);
        ++num;
        str = "index.html?name=" +num;
        history.replaceState({"num":num}, "", str);
    })
    window.addEventListener("popstate", function() {
        console.log(window.location.search);
        alert("执行ajax请求");
    });
</script>