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