JavaScript浏览器之history

下载贤集网APP入驻自媒体

基本概念
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);
})
复制代码
文中的代码部分，带有“例子”和“测试代码”字样的，只是用来学习或测试某一功能用的代码，不可以直接用于项目的开发中。带有“代码如下”字样的，都是经过本人测试，简单修改即可用于项目开发中的代码，如有错误，欢迎指出。