JavaScript浏览器之history-原创手记-慕课网

基本概念

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

history对象常用属性

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

测试代码：

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

history对象常用方法

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

测试代码：

setTimeout(function(){
    location.href=location.href+"#ID";
    alert("当前页面历史记录数量: "+history.length);
    setTimeout(function(){
        history.go(-1);
        alert("后退一个页面")
        setTimeout(function(){
            history.go(1);
            alert("前进一个页面");
        }, 500)
    }, 500)
}, 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不会真的向服务器发送请求，它只是单纯地在历史记录列表里添加一条记录，并将指针指向这个记录。

测试代码：

<button>添加历史记录</button>
<button onclick="history.go(-1)">后退</button>
<button onclick="history.go(1)">前进</button>
<h1>历史记录长度：<span> </span></h1>
<h1>当前是：<span> </span></h1>
<h1>Hash值：<span> </span></h1>

var add=document.getElementsByTagName('button')[0],
    len=document.getElementsByTagName('span')[0],
    num=document.getElementsByTagName('span')[1],
    hash=document.getElementsByTagName('span')[2],
    i=0,
    apples=["red","green","yellow"];
    for(;i<apples.length;i++){//添加三条历史记录
        (function(i){
            add.addEventListener("click",function(){
                history.pushState({data: apples[i]},null,"#"+apples[i]);
                len.firstChild.data=history.length;
            })
        })(i)
    }
    window.addEventListener("popstate",function(event){
        if(event.state){
            num.firstChild.data=event.state.data;
        }else{
            num.firstChild.data="";
        }   
    })
    window.addEventListener("hashchange",function(event){
        hash.firstChild.data=location.hash.slice(1);
    })

注意：

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()的用法完全一致，只不过它不会在历史记录列表中创建新的历史记录，只会重写当前记录。

测试代码：

<button>添加历史记录</button>
<button onclick="history.go(-1)">后退</button>
<button onclick="history.go(1)">前进</button>
<button>修改历史记录</button>
<h1>历史记录长度：<span> </span></h1>
<h1>当前是：<span> </span></h1>
<h1>Hash值：<span> </span></h1>

var add=document.getElementsByTagName('button')[0],
    xiu=document.getElementsByTagName('button')[3],
    len=document.getElementsByTagName('span')[0],
    num=document.getElementsByTagName('span')[1],
    hash=document.getElementsByTagName('span')[2],
    i=0,
    apples=["red","green","yellow"];
    for(;i<apples.length;i++){//添加三条历史记录
        (function(i){
            add.addEventListener("click",function(){
                history.pushState({data: apples[i]},null,"#"+apples[i]);
                len.firstChild.data=history.length;
            })
        })(i)
    }
    xiu.addEventListener("click",function(){
        history.replaceState({data: "blue"},null,"#blue");
    })
    window.addEventListener("popstate",function(event){
        if(event.state){
            num.firstChild.data=event.state.data;
        }else{
            num.firstChild.data="";
        }   
    })
    window.addEventListener("hashchange",function(event){
        hash.firstChild.data=location.hash.slice(1);
    })

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

JavaScript浏览器之history原创