HTML5实战与剖析之历史管理(history对象)
Html5
李梦小龙
1人收藏 393次学习

HTML5实战与剖析之历史管理(history对象)

原文地址:HTML5实战与剖析之历史管理(history对象)​ 

HTML5新添加了对历史的管理,更新了history对象让管理历史状态更加方便了。在现代Web应用中,用户可以通过”前进”和”后退”按钮进行历史页面的切换。这让一些不在新页面中打开的新页面前进后退自如,提高了用户体验。

通过haschange事件,可以知道URL的参数什么时候发生了变化,也就是什么时候该有所反应。通过状态管理的API,能够在不加载新页面的情况下改变浏览器的URL。所以需要使用history.pushState()方法。history.pushState()方法接收三个参数:1.要存的内容 2.标题(一般写个空的字符串) 3.地址(可选)。小例子如下

JavaScript代码

history.pushState({name: "menglong"}, '', "li.html");  

执行了history.pushState()方法后,新的状态信息就会被加入到历史状态栈,而浏览器地址栏也会变成新的相对URL。但是,浏览器并不会想服务器发送请求,即使历史状态改变之后查新location.href也会返回与地址栏中相同的地址。另外,第二个参数目前还没有浏览器实现,所以完全可以只传入一个空字符串即可,或者一个短标题也可以。第一个参数则应该尽可能提供初始化页面状态所需的各种信息。
因为history.pushState()方法会创建新的历史状态,所以会发现”后退”按钮也可以使用了。按下”后退”按钮,会触发window对象的popstate事件。Popstate事件的事件对象有一个state属性,这个属性就包含着当初以第一个参数传递给pushState()的状态对象。小例子如下

JavaScript代码

window.addEventListener('popstate',function(ev){  
    var state = event.state;  
    if(state){ // 当第一个页面加载的时候state为空  
        processState(state)  
    }  
}, false);  

得到了这个状态的对象后,必须把页面重置为状态对象中的数据表示的状态(因为浏览器不会自动为你做这些)。记住,浏览器加载的第一个页面没有状态,所以”后退”阿牛返回浏览器加载的第一个页面时,event.state值为null。
要更新当前历史状态,可以调用replaceState(),传入的参数与pushState()方法的前两个参数相同。调用replaceState()不会在历史状态栈中创建新状态,只会重写当前状态。小例子如下

JavaScript代码

history.replaveState({name: "meng"}, "meng1234");  

在使用Html5的历史状态管理机制的时候,需要确保使用pushState()创造的每一个”假”URL,在Web服务器上都有一个真的、实际存在的URL与之对应。否则,单机”刷新”按钮会导致404错误。

支持HTML5历史状态管理的浏览器有Chrome、Safari 5+、Firefox 4+和Opera 11.5+。在Safari和Chrome中,传递给pushState()或replaceState()的状态对象中不能包含DOM元素。而Firefox支持在状态对象中包含DOM元素。Opera还支持一个history.state属性,它返回当前状态的状态对象。下面就是小例子时间了,结合小例子才能更好的理解HTML5中的历史管理。

添加href值实现历史管理

HTML代码

<input type="button" value="35选7" id="input1" />  
<div id="div1"></div>  

JavaScript代码

//onhashchange : 事件 : 当hash值改变的时候触发的事件  
  
//hash改变就会出现就会出现历史管理  
  
window.onload = function(){  
    var oInput = document.getElementById('input1');  
    var oDiv = document.getElementById('div1');  
      
    var obj = {};  
      
    oInput.onclick = function(){  
      
        var number = randomNum(35,7);  
          
        oDiv.innerHTML = number;  
          
        var oRN = Math.random();  
          
        obj[oRN] = number;  
          
        window.location.hash = oRN;  
      
    };  
      
      
    window.onhashchange = function(){  
      
        var number = obj[window.location.hash.substring(1)] || '';  
          
        oDiv.innerHTML = number;  
      
    };  
      
      
    function randomNum(alls,now){  
      
        var arr = [];  
        var newArr = [];  
          
        for(var i=1;i<=alls;i++){  
            arr.push(i);  
        }  
          
          
        for(var i=0;i<now;i++){  
            newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1 ) );  
        }  
          
        return newArr;  
      
    }  
      
};  

 

通过HTML5中history对象实现历史管理

HTML代码

<input type="button" value="35选7" id="input1" />  
<div id="div1"></div>  

JavaScript代码

//pushState : 三个参数:1.要存的内容 2.标题(一般写个空的字符串) 3.地址(可选)  
  
//history.pushState({name: "menglong"}, '', "li.html");  
  
window.onload = function(){  
    var oInput = document.getElementById('input1');  
    var oDiv = document.getElementById('div1');  
      
    var iNow = 0;  
      
    oInput.onclick = function(){  
      
        var number = randomNum(35,7);  
          
        oDiv.innerHTML = number;  
  
        history.pushState(number,'',iNow++);  
      
    };  
      
      
    window.onpopstate = function(ev){  //历史管理改变,就会触发  
          
        var number = ev.state || '';  
  
        oDiv.innerHTML = number;  
          
    };  
      
      
    function randomNum(alls,now){  
      
        var arr = [];  
        var newArr = [];  
          
        for(var i=1;i<=alls;i++){  
            arr.push(i);  
        }  
          
          
        for(var i=0;i<now;i++){  
            newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1 ) );  
        }  
          
        return newArr;  
      
    }  
      
};  

 

1KE就业直通车 Web前端工程师

加入1KE学习俱乐部

1KE学习俱乐部是只针对1KE学员开放的私人俱乐部
标签:
HTML5 前端