具体解释window.history
Window.history保存用户在一个会话期间的站点訪问记录,用户每次訪问一个新的URL即创建一个新的历史记录。
history.go()、history.back()、history.forward()
history.back()和history.forward()分别表示向后一页和向前一页。
history.go(num)表示向前或向后翻多少页。num为正数表示向前翻。为负数则向后翻。
History.back()等价于history.go(-1),history.forward()等价于history.go(1)。
运行这三个中的任一方法,触发浏览器的popstate事件,假设仅仅是hash部分发生变化。还可能同一时候触发hashchange事件。
改动站点路径并创建新的历史记录
history.pushState(statedata, title, url);
參数URL必须和当前URL同源。否则会报错。仅仅能够改动URL中路径、井号之后的片段(即hash)或者URL中问号(?)之后的查询区段。
每运行一次pushState()用新的URL替换掉当前URL。即地址栏URL会变,window.location.href也会变,同一时候创建一个新的历史记录。但运行pushState()永远不触发hashchange事件。
參数statedata能够是不论什么被序列化的数据。这些数据被保存在用户硬盘上。但状态数据有限制大小,比方Firefox仅仅同意640KB字符。
使用pushState()的优点:仅仅改URL的hash部分,window.location使用的是同一个document。
兼容性问题
pushState直到IE10才被支持,在早版本号的IE中仅仅能通过改动window.location=”#foo”完毕。但这样会触发hashchange事件。
改动站点路径但不创建新的历史记录
看标题就知道了,replaceState()和pushState()的唯一差别是不创建新的历史记录。而是直接改动当前历史记录。
history.replaceState(stateData, title, url);
历史记录状态
有两种方式能够訪问历史訪问记录的状态信息,history.state返回历史訪问堆栈最顶端的记录的状态;而PopStateEvent.state值有在PopStateEvent事件触发的时候在事件监听中才干訪问。
State的默认值在不同浏览器可能不同。比方IE10下面默认是undefiend,但IE10和IE11默认是null。
HTML5推荐使用nul为默认值。
事件
popstate事件
调用history.back()、history.forward()、history.go()等方法。会触发popstate事件,单纯调用pushState()或replaceState()不触发popstate事件。
訪问事件的state属性可获取当初pushState()或replaceState()设置的状态数据。
具体解释window.history的更多相关文章
- 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- js pjax 和window.history.pushState,replaceState
原文:http://blog.linjunhalida.com/blog/pjax/ github:https://github.com/defunkt/jquery-pjax 什么是pjax? 现在 ...
- 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL (转)
在访问现在很火的google plus时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器的前进和后退.不禁让人想问,是什么有这么强大 ...
- safari 浏览器window.history.go(-1)运行无效解决办法
这几天做了几个手机端app的wap页面,做完之后发现一个问题,那就是ios系统下的safari浏览器不支持window.history.go(-1)..无语... 解决方法很简单!加上return f ...
- javascript:window.history.go(-1)
history是你浏览过的网页的url(简单的说就是网址)的集合,也就是你的浏览器里的那个历史记录.它在js里是一个内置对象,就跟document一样,它有自己的方法,go就是其中一个. 这个方法的参 ...
- window.history 和 DWZ 框架
DWZ框架的ajax请求返回的一般都是一个HTML片段,整个页面是由一个个HTML片段组成的,可以由TAB切换其内容,但是只有一个body和HEAD,一般head 和 菜单栏是不会动的. 今天遇到一个 ...
- window.history.pushState与ajax实现无刷新更新页面url
ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...
- javascript宿主对象之window.history
window.historys属性允许我们操作同一个浏览器回话中的已访问页面,例如我们可以看到在这之前我们浏览页面的数量: window.history.length 由于隐私保护,我们无法获取这些页 ...
- 由window.history.back()引发的问题
由window.history.back()引发的问题 编写人:CC阿爸 2015-1-30 今天在这里,我想与大家一起分享由windows.history.back()引发的问题,笔者在实际开发当中 ...
随机推荐
- LeetCode101--对称二叉树
''' 给定一个二叉树,检查它是否是镜像对称的. ''' class TreeNode: def __init__(self, x): self.val = x self.left = None se ...
- Atrenta电话面试(C++研发工程师)
1.代码量是多少,你负责哪一块,工作量占%几,改进了什么 2.c++ 和 c 的 区别 3.list 和 vector 的 适用条件 4.hash_map 和 map 的 区别 , 使用h ...
- 【01】在 issue 中创建 list
[01]在 issue 中创建 list 你想在你的 issue中看到可多选的 list 么? 当你查看问题时,你想不想让它变成 2 of 5 这样的形式. 如果想,你可以在 issue 中使用以下句 ...
- JMeter学习笔记21-如何添加思考时间
本文来介绍,JMeter如何插入思考时间.前面介绍过一个真实的性能测试场景,是需要加入思考时间,来模拟真实用户行为.本文就来介绍,如何在三个请求之间添加思考时间. 1. 在Test Plan下新建一个 ...
- 九度oj 题目1131:合唱队形
题目描述: N位同学站成一排,音乐老师要请其中的(N-K)位同学出列,使得剩下的K位同学不交换位置就能排成合唱队形. 合唱队形是指这样的一种队形:设K位同学从左到右依次编号为1, 2, …, K,他们 ...
- HDU 3001 Travelling ——状压DP
[题目分析] 赤裸裸的状压DP. 每个点可以经过两次,问经过所有点的最短路径. 然后写了一发四进制(真是好写) 然后就MLE了. 懒得写hash了. 改成三进制,顺利A掉,时间垫底. [代码] #in ...
- Mychael原创题 洛谷T23923 Mychaelの水题 【题解】
原题链接 题目大意: 有来自三个地区的人各a,b,c位,他们排成了一排.请问有多少种不同类型的排法,使得相邻的人都来自不同的地区 \(a,b,c<=200\) 答案取模 题解 弱弱的标程解法 设 ...
- 刷题总结——动态逆序对(bzoj3295)
题目: Description 对于序列A,它的逆序对数定义为满足i<j,且Ai>Aj的数对(i,j)的个数.给1到n的一个排列,按照某种顺序依次删除m个元素,你的任务是在每次删除一个元素 ...
- 做运动(Dijkstra+并查集+MST)
上面的题解是这样,这道题我真的脑残,其实打代码的时候就意识到了许多,可以用Dfs+Dij+二分,这样还可以卡一卡 但是我打了spfa+spfa+二分,这个显然很慢,类似的题目我好像还做过一道的,就是在 ...
- JSON与字符串互相转换的几种方法
1 2 3 4 5 6 7 8 字符串转对象(strJSON代表json字符串) var obj = eval(strJSON); var obj = strJSON.parseJSON(); ...