HTML5 之 pushstate、popstate 操作 history 无刷新改变当前 url

发布于 2021-12-03 22:56:53 字数 2805 浏览 1240 评论 0

一、认识 window.history

window.history 表示 window 对象的历史记录,是由用户主动产生,并且接受 JavaScript 脚本控制的全局对象。window 对象通过 history 对象提供对览器历史记录的访问能力。它暴露了一些非常有用的方法和属性,让你在历史记录中自由前进和后退。

1、历史记录的前进和后退

在历史记录中后退,可以这么做:

window.history.back();

这就像用户点击浏览器的后退按钮一样。

类似的,你可以前进,就像在浏览器中点击前进按钮,像这样:

window.history.forward();

2、移动到指定历史记录点

通过指定一个相对于当前页面位置的数值,你可以使用 go() 方法从当前会话的历史记录中加载页面(当前页面位置索引值为 0,上一页就是 -1,下一页为 1)。

要后退一页(相当于调用 back()):

window.history.go(-1);

向前移动一页(相当于调用 forward()):

window.history.go(1);

类似的,传递参数 2,你就可以向前移动 2 个记录点。你可以查看 length 属性值,了解历史记录栈中一共有多少个记录点:

window.history.length;

二、修改历史记录点

HTML5 的新 API 扩展了 window.history,使历史记录点更加开放了。可以存储当前历史记录点、替换当前历史记录点、监听历史记录点,下面逐一简要说明一下。

1、存储当前历史记录点

存储的方式类似于数组的入栈(Array.push()),在 window.history 里新增一个历史记录点,例如:

// 当前的url为:http://qianduanblog.com/index.html
var json={time:new Date().getTime()};
// @状态对象:记录历史记录点的额外对象,可以为空
// @页面标题:目前所有浏览器都不支持
// @可选的url:浏览器不会检查url是否存在,只改变url,url必须同域,不能跨域
window.history.pushState(json,"","http://qianduanblog.com/post-1.html");</pre>
执行了pushState方法后,页面的url地址为http://qianduanblog.com/post-1.html。

2、替换当前历史记录点

window.history.replaceState 和 window.history.pushState 类似,不同之处在于 replaceState 不会在 window.history 里新增历史记录点,其效果类似于 window.location.replace(url),都是不会在历史记录点里新增一个记录点的。当你为了响应用户的某些操作,而要更新当前历史记录条目的状态对象或URL时,使用 replaceState() 方法会特别合适。

3、监听历史记录点

监听历史记录点,直观的可认为是监听 URL 的变化,但会忽略 URL 的 hash 部分,监听 URL 的 hash 部分,HTML5 有新的 API 为 onhashchange,我的博客里也有说到该方法和跨浏览器的兼容解决方案。可以通过 window.onpopstate 来监听url的变化,并且可以获取存储在该历史记录点的状态对象,也就是上文说到的 json 对象,如:

// 当前的url为:http://qianduanblog.com/post-1.html
window.onpopstate=function()
{
	// 获得存储在该历史记录点的json对象
	var json=window.history.state;
	// 点击一次回退到:http://qianduanblog.com/index.html
	// 获得的json为null
	// 再点击一次前进到:http://qianduanblog.com/post-1.html
	// 获得json为{time:1369647895656}
}

值得注意的是:JavaScript 脚本执行 window.history.pushState 和 window.history.replaceState 不会触发 onpopstate 事件。

还有一点注意的是,谷歌浏览器和火狐浏览器在页面第一次打开的反应是不同的,谷歌浏览器奇怪的是回触发 onpopstate 事件,而火狐浏览器则不会。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

奢望

暂无简介

文章
评论
834 人气
更多

推荐作者

微信用户

文章 0 评论 0

小情绪

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

笨死的猪

文章 0 评论 0

彭明超

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文