HTML5之pushstate、popstate操作history,无刷新改变当前url
一、认识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的更多相关文章
- 使用ajax和history.pushState无刷新改变页面URL
表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...
- 使用ajax和history.pushState无刷新改变页面URL onpopstate(转)
Javascript代码 var htmlData1 = $.ajax( { url: "/getXXXResponse", async: false }).re ...
- 使用ajax和history.pushState无刷新改变页面URL(转)
表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...
- window.history.pushState与ajax实现无刷新更新页面url
ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...
- 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 通过history.pushState无刷新改变url
通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...
- history.pushState无刷新改变url
通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...
- 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL (转)
在访问现在很火的google plus时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器的前进和后退.不禁让人想问,是什么有这么强大 ...
- 使用pjax实现类似github无刷新更改页面url
pjax=pushState+ajax,相信用过github的同学都知道,github部分页面采用了pjax这个项目来实现ajax无刷新加载的同时改变页面url.一起来学习一下这个插件吧. 我们都知道 ...
随机推荐
- ubuntu下git clone 提速
环境:ubuntu16.04 方法:通过socks5代理并且使用http链接 步骤: 1.设置全局使用socks5代理,并且使用http传输 git config --global http.prox ...
- 试着用React写项目-利用react-router解决跳转路由等问题(二)
转载请注明出处:王亟亟的大牛之路 这一篇还是继续写react router相关的内容,废话之前先安利:https://github.com/ddwhan0123/Useful-Open-Source- ...
- Ubuntu 14.04 python3.6 安装
参考 how-do-i-install-python-3-6-using-apt-get Ubuntu 14.04 python3.6 安装 sudo add-apt-repository ppa:j ...
- 深度优先搜索之小z的房子与验证码识别
题目:小z的房子 高级语言程序设计实践题目:2.4 小z 的房子 ★实验任务 小z 通过自己的努力,终于发家致富.现在小明有一个大小为N*M 的 院子,雨后积起了水.四联通的积水被认为是连接在一起的. ...
- Springboot 学习笔记 之 Day 1
SpringBoot快速入门 https://spring.io/ 1. SpringBoot简介Spring Boot来简化Spring应用开发,约定大于配置,去繁从简,just run就能创建一个 ...
- 删除node_modules
// 删除node_modules $ rm -rf node_modules
- 《剑指offer》第十八题(删除链表中重复的结点)
// 面试题18(二):删除链表中重复的结点 // 题目:在一个排序的链表中,如何删除重复的结点?例如,在图3.4(a)中重复 // 结点被删除之后,链表如图3.4(b)所示. #include &l ...
- windows 网页打不开github网站
gitbub是外网,经常会遇到访问不了的问题,并且有时能访问也网速好慢. 解决这个问题的方法是 更改hosts文件,地址:C:\Windows\System32\Drivers\etc 我在hosts ...
- 12月14日 bs-grid , destroy_all()
bootstrap Grid : The Bs grid system has four classes: xs (phones), sm (tablets), md (desktops), and ...
- homestead 暴露接口到外网
laravel 官方推荐的运行环境是homestead,但homestead是个虚拟机,你自己访问没问题,给别人联调怎么办? 一个大型项目肯定不止一个人开发,这个时候就需要将你虚拟机上的接口暴露给外网 ...