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


Posted in HTML / CSS onMarch 15, 2017

一、认识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");

执行了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事件,而火狐浏览器则不会。

以上所述是小编给大家介绍的详解HTML5之pushstate、popstate操作history,无刷新改变当前url,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
css3.0 图形构成实例练习二
Mar 19 HTML / CSS
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
使用CSS3制作版头动画效果
Dec 24 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 HTML / CSS
canvas简单连线动画的实现代码
Feb 04 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 HTML / CSS
html5调用摄像头实例代码
Jun 28 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 #HTML / CSS
HTML5各种头部meta标签的功能(推荐)
Mar 13 #HTML / CSS
处理HTML5新标签的浏览器兼容版问题
Mar 13 #HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
Mar 10 #HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 #HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 #HTML / CSS
HTML5 localStorage使用总结
Feb 22 #HTML / CSS
You might like
PHP 在5.1.* 和5.2.*之间 PDO数据库操作中的不同之处小结
2012/03/07 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
php封装的验证码类分享
2017/02/26 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
js中replace的用法总结
2013/12/27 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
Python获取脚本所在目录的正确方法
2014/04/15 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
Python字符串拼接六种方法介绍
2017/12/18 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
PyQt5 QSerialPort子线程操作的实现
2018/04/21 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
django框架中间件原理与用法详解
2019/12/10 Python
python中常见错误及解决方法
2020/06/21 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
致200米运动员广播稿
2014/02/06 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers
实现一个简单得数据响应系统
2021/11/11 Javascript