JavaScript浏览器之history

基本概念  上海代孕 http://www.xyrjkf.cn/sitemap.xml

history对象保存着用户上网的历史记录，从窗口打开的那一刻算起。
每个浏览器窗口、标签页或框架都有自己的history对象。

history对象常用属性

history.length：保存历史记录的数量。这个数量包括所有向前和向后的记录。一般用于检测当前页面是不是用户历史记录中的第一个页面。
IE和Opera从0开始，而Firefox、Chrome和Safari从1开始。

测试代码：

1. setTimeout(function(){
2. location.href=location.href+"#ID";
3. alert("当前页面历史记录数量: "+history.length)
4. }, 500)

复制代码

history对象常用方法

1、history.go(number|URL)：跳转到历史记录列表中的某个具体的页面。
这个方法接收一个参数：如果参数是数字，表示向前或向后跳转的页面数的一个整数值（1向前跳一个页面，-1向后跳一个页面)；
如果参数是字符串，字符串必须是局部或完整的URL，此时浏览器会跳转到历史记录中包含该字符串的第一个位置。

测试代码：

1. setTimeout(function(){
2. location.href=location.href+"#ID";
3. alert("当前页面历史记录数量: "+history.length);
4. setTimeout(function(){
5. history.go(-1);
6. alert("后退一个页面")
7. setTimeout(function(){
8. history.go(1);
9. alert("前进一个页面");
10. }, 500)
11. }, 500)
12. }, 500)

复制代码

2、history.back()：跳转到历史记录列表中的前一个URL，效果等价于点击后退按钮或调用 history.go(-1)。
3、history.forward()：跳转到历史记录列表中的下一个 URL，效果等价于点击前进按钮或调用 history.go(1)。

---

HTML5的history.pushState()方法

引入目的：

Ajax可以实现在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页，这就导致浏览器的“后退”和“前进”按钮失去了作用。

参数说明：

history.pushState(state,title,URL):

state：创建一个JavaScript对象，当执行pushState()方法后，这个对象就会被加入到历史状态栈，这个对象的最大存储空间为640k。
title：目前还没有浏览器实现，可以传入一个空字符串或一个短标题即可。
URL：添加到浏览器地址栏的新的相对URL，但是这个新的URL不会真的向服务器发送请求，它只是单纯地在历史记录列表里添加一条记录，并将指针指向这个记录。

测试代码：

1. <button>添加历史记录</button>
2. <button onclick="history.go(-1)">后退</button>
3. <button onclick="history.go(1)">前进</button>
4. <h1>历史记录长度：<span> </span></h1>
5. <h1>当前是：<span> </span></h1>
6. <h1>Hash值：<span> </span></h1>
8. var add=document.getElementsByTagName('button')[0],
9. len=document.getElementsByTagName('span')[0],
10. num=document.getElementsByTagName('span')[1],
11. hash=document.getElementsByTagName('span')[2],
12. i=0,
13. apples=["red","green","yellow"];
14. for(;i<apples.length;i++){//添加三条历史记录
15. (function(i){
16. add.addEventListener("click",function(){
17. history.pushState({data: apples[i]},null,"#"+apples[i]);
18. len.firstChild.data=history.length;
19. })
20. })(i)
21. }
22. window.addEventListener("popstate",function(event){
23. if(event.state){
24. num.firstChild.data=event.state.data;
25. }else{
26. num.firstChild.data="";
27. }
28. })
29. window.addEventListener("hashchange",function(event){
30. hash.firstChild.data=location.hash.slice(1);
31. })

复制代码

注意：

popstate事件：按下“后退”按钮就会触发window的popstate事件，popstate事件的event对象有一个state属性，这个属性保存着history.pushState()方法中的state参数。当浏览器加载到第一个页面时，event.state值为null。
hashchange事件：当URL的锚部分(以'#'号为开始)发生改变时触发hashchange事件，但执行history.pushState()方法时不会触发hashchange事件。

history.replaceState(state,title,URL)

和history.pushState()的用法完全一致，只不过它不会在历史记录列表中创建新的历史记录，只会重写当前记录。

测试代码：

1. <button>添加历史记录</button>
2. <button onclick="history.go(-1)">后退</button>
3. <button onclick="history.go(1)">前进</button>
4. <button>修改历史记录</button>
5. <h1>历史记录长度：<span> </span></h1>
6. <h1>当前是：<span> </span></h1>
7. <h1>Hash值：<span> </span></h1>
9. var add=document.getElementsByTagName('button')[0],
10. xiu=document.getElementsByTagName('button')[3],
11. len=document.getElementsByTagName('span')[0],
12. num=document.getElementsByTagName('span')[1],
13. hash=document.getElementsByTagName('span')[2],
14. i=0,
15. apples=["red","green","yellow"];
16. for(;i<apples.length;i++){//添加三条历史记录
17. (function(i){
18. add.addEventListener("click",function(){
19. history.pushState({data: apples[i]},null,"#"+apples[i]);
20. len.firstChild.data=history.length;
21. })
22. })(i)
23. }
24. xiu.addEventListener("click",function(){
25. history.replaceState({data: "blue"},null,"#blue");
26. })
27. window.addEventListener("popstate",function(event){
28. if(event.state){
29. num.firstChild.data=event.state.data;
30. }else{
31. num.firstChild.data="";
32. }
33. })
34. window.addEventListener("hashchange",function(event){
35. hash.firstChild.data=location.hash.slice(1);
36. })

上海代孕公司 http://www.xyrjkf.cn/

---

文中的代码部分，带有“例子”和“测试代码”字样的，只是用来学习或测试某一功能用的代码，不可以直接用于项目的开发中。带有“代码如下”字样的，都是经过本人测试，简单修改即可用于项目开发中的代码，如有错误，欢迎指出。