详解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 伪类选择器 nth-child()说明
Jul 10 HTML / CSS
css3发光搜索表单分享
Apr 11 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
May 10 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
CSS3 实现的加载动画
Dec 07 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
Jan 14 HTML / CSS
用HTML5制作一个简单的弹力球游戏
May 12 HTML / CSS
HTML5 画布canvas使用方法
Mar 18 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
关于flex 上下文中自动 margin的问题(完整例子)
May 20 HTML / CSS
HTML中的表格元素介绍
Feb 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
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
PHP优于Node.js的五大理由分享
2012/09/15 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
js实现的切换面板实例代码
2013/06/17 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
2013/12/11 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
python使用正则搜索字符串或文件中的浮点数代码实例
2014/07/11 Python
python编写网页爬虫脚本并实现APScheduler调度
2014/07/28 Python
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
深入理解Python3中的http.client模块
2017/03/29 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
python实现石头剪刀布程序
2021/01/20 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
取保候审保证书
2014/04/30 职场文书
优秀求职信
2014/05/29 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
承诺书范本
2015/01/21 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书