无刷新页面切换 - pushState

最新推荐文章于 2024-04-11 07:50:10 发布

当时惘然

最新推荐文章于 2024-04-11 07:50:10 发布

阅读量1.5k

点赞数 1

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

本文链接：https://blog.csdn.net/u010528093/article/details/53247520

版权

本文介绍了HTML5的pushState API在无刷新页面切换中的应用，结合ajax实现局部更新并管理历史记录。文章详细讲解了pushState、replaceState的方法以及window.onpopstate事件，提供了一个简单的实现示例，用于在点击按钮时动态加载内容并产生历史记录。

摘要由CSDN通过智能技术生成

前言

这样的需求很常见：点击页码局部更新页面（非整体刷新），并且产生历史管理。局部刷新很容易实现，ajax可以满足我们的需要，但是这并不会产生历史管理，好在html5给我们提供了几个好用的api方便解决这个问题，见下文。

正文

一、API

1、pushState
pushState()有三个参数：一个状态对象、一个标题（现在会被忽略），一个可选的URL地址。
state：与要跳转到的URL对应的状态信息。
title：空字符串（以后可能有用）。
url：要跳转到的URL地址，不能跨域。

作用：将当前URL和history.state加入到history中，并用新的state和URL替换当前。不会造成页面刷新。

2、replaceState
history.replaceState()操作类似于history.pushState()，不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。

3、window.onpopstate
history.go和history.back（包括用户按浏览器历史前进后退按钮）触发，并且页面无刷的时候（由于使用pushState修改了history）会触发popstate事件，事件发生时浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。通过event.state也可以获取history.