popstate_HTML5之pushstate、popstate操作history,无刷新改变当前url
一、认识window.history
window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象。window对象通过history对象提供对览器历史记录的访问能力。它暴露了一些非常有用的方法和属性,让你在历史记录中自由前进和后退。
1、历史记录的前进和后退
在历史记录中后退,可以这么做:
1 window.history.back();
这就像用户点击浏览器的后退按钮一样。
类似的,你可以前进,就像在浏览器中点击前进按钮,像这样:
1 window.history.forward();
2、移动到指定历史记录点
通过指定一个相对于当前页面位置的数值,你可以使用go()方法从当前会话的历史记录中加载页面(当前页面位置索引值为0,上一页就是-1,下一页为1)。
要后退一页(相当于调用back()):
1 window.history.go(-1);
向前移动一页(相当于调用forward()):
1 window.history.go(1);
类似的,传递参数“2”,你就可以向前移动2个记录点。你可以查看length属性值,了解历史记录栈中一共有多少个记录点:
1 window.history.length;
二、修改历史记录点
HTML5的新API扩展了window.history,使历史记录点更加开放了。可以存储当前历史记录点、替换当前历史记录点、监听历史记录点,下面逐一简要说明一下。
1、存储当前历史记录点
存储的方式类似于数组的入栈(Array.push()),在window.history里新增一个历史记录点,例如:
1 //当前的url为:http://qianduanblog.com/index.html
2 var json={time:newDate().getTime()};3 //@状态对象:记录历史记录点的额外对象,可以为空
4 //@页面标题:目前所有浏览器都不支持
5 //@可选的url:浏览器不会检查url是否存在,只改变url,url必须同域,不能跨域
6 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对象,如:
1 //当前的url为:http://qianduanblog.com/post-1.html
2 window.onpopstate=function()3 {4 //获得存储在该历史记录点的json对象
5 var json=window.history.state;6 //点击一次回退到:http://qianduanblog.com/index.html
7 //获得的json为null
8 //再点击一次前进到:http://qianduanblog.com/post-1.html
9 //获得json为{time:1369647895656}
10 }
值得注意的是:javascript脚本执行window.history.pushState和window.history.replaceState不会触发onpopstate事件。
还有一点注意的是,谷歌浏览器和火狐浏览器在页面第一次打开的反应是不同的,谷歌浏览器奇怪的是回触发onpopstate事件,而火狐浏览器则不会。
popstate_HTML5之pushstate、popstate操作history,无刷新改变当前url相关推荐
- popstate_详解HTML5之pushstate、popstate操作history,无刷新改变当前url
一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过history对 ...
- 使用ajax和history.pushState无刷新改变页面URL
HTML5里引用了新的API,history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别 传统的ajax有如下的 ...
- 阻止微信后退,阻止微信页面关闭 history.pushState 无刷新改变页面URL
阻页面后退 防止页面关闭 <!DOCTYPE html> <html> <head><title>阻止微信后退按钮</title> < ...
- ajax怎么找回地址栏,使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL...
HTML5里引用了新的API,就是history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别 传统的ajax有如 ...
- 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" ...
- 通过history.pushState无刷新改变url
背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越来越多的网站采用ajax来加载资源.因为异步加载的特性, ...
- pjax php,php整合pjax(pushstate+ajax)实现无刷新页面
PJAX效果 通过url可以跟踪ajax的动态加载内容.这种技术尤其在two step view布局的视图中有很大的好处.无刷新加载页面,意味着响应速度和用户体验得到了极大的提升,在静态脚本和通用模块 ...
- HTML5网页页面无刷新更新页面URL
HTML5可通过history.pushState修改网页的URL地址,在配合相关代码显示隐藏相应界面便可以实现单页面多界面相互操作.该方法比直接访问URL地址速度快,执行效率高,UI体验好,但会增加 ...
- Php无刷新修改url,history 实现无刷新更改url和页面内容
在访问google plus 和网易m站时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器的前进和后退.不禁让人想问,是什么有这么强 ...
最新文章
- 如何用python画数据图-python怎么对动态数据在同一张图上画出来
- boost::mp11::mp_count_if相关用法的测试程序
- maple里面怎么搜索_C#基础系列06 全栈第三步 说好的增加搜索
- python django前端重构_django修改models重建数据库的操作
- 2015年4月20 号的日志
- 表、数据的增删改查(所有列、指定列、添加常量、字段起别名、和并列、去除重复、条件查询、比较、判断空、模糊查询)...
- 工厂利用计算机实现温度调节属于,工厂利用计算机系统实现温度调节、阀门开关,该应用属于()。A.过程控制B.数据处理C.科学计算D.C...
- app:利用HBuilder打包webpack项目
- 5 分钟,使用内网穿透快速实现远程桌面
- 大数据系统和分析技术综述【程学旗】
- 4个C++算法数学模板(备战蓝桥杯)
- 【HTML+CSS】自定义字体
- 双硬盘安装win10和linux双系统,双硬盘最初尝试完美安装Windows10 + ubuntu16双系统
- 倒计时 4天,COSCon'22 会议议程全览 精彩亮点抢鲜看!
- lol最克制诺手的英雄_LOL:最克制诺手的三个英雄,剑姬上榜,第一能打得诺手出不了塔...
- Javascript技巧(230个)[转载]
- jquery的点击事件驱动获取值
- 空心三角形(图形的输出)c语言
- 什么样的企业算是负责任的企业
- js鼠标放上去和移出事件