HTML5 history API實踐 - lvdabao－IT工程師數位筆記本

文章出處

一、history API知識點總結

　　在HTML4中，我們已經可以使用window.history對象來控制歷史記錄的跳轉，可以使用的方法包括：

　　history.forward();//在歷史記錄中前進一步

　　history.back();//在歷史記錄中后退一步

　　history.go(n);//在歷史記錄中跳轉n步，n=0則刷新當前頁，n=-1則后退一步

　　在HTML5中，又新增了四個可用的API，包括：

history.pushState(data[,title][,url]);//向歷史記錄中追加一條記錄，data是一個js對象，可以是任何格式的json數據，title參數暫時不起作用，我親自試了也確實如此。參數url是指地址欄中的地址值，不填則保持當前url

history.replaceState(data[,title][,url]);//替換當前頁在歷史記錄中的信息。參數與上面一致。

history.state;//是一個屬性，可以得到當前頁的state信息。

window.onpopstate;//是一個事件，在點擊瀏覽器后退按鈕或js調用forward()、back()、go()時觸發。監聽函數中可傳入一個event對象，event.state即為通過pushState()或replaceState()方法傳入的data參數。

二、新API在實際中的使用

　　知道了有這些新API，我們可以如何利用它們呢？以下是兩個相關的使用案例：

　　① 還原ajax程序中瀏覽器后退按鈕的功能。其實這個應用已經被大家廣泛熟知了，由于ajax的固有缺點（無法使用瀏覽器后退按鈕返回上一頁），通過在發起ajax請求時在歷史記錄中添加一條記錄并修改地址欄中的值，來模擬一個正常的跳轉，同時仍然保留ajax異步加載的優點。方法如下：

var title = '另一篇隨筆';
var url = 'http://www.cnblogs.com/lvdabao/p/另一篇隨筆.html';
var state = {title:title,url:url};
history.pushState(state,title,url);//第三個參數url的值將會出現在地址欄

　　點擊下面按鈕，注意地址欄的變化：

　　②保存異步請求的參數，在頁面返回時重現原來頁面上的動態數據。具體需求是這樣的：比如我們處在一個搜索結果列表頁，頁面上的內容是根據搜索條件動態得到的，我們可以點擊其中一項進行詳情預覽（發ajax請求），在詳情頁點擊“返回”時，我們希望原來的搜索數據還在，而不是變回列表頁初始加載時的數據。以前，我們可以用回傳參數的方式解決這樣的需求，但那樣做的缺點就是有大量的數據需要來回傳遞，如果頁面層級較多，將會很不方便。那么現在，我們結合使用history的onpopstate事件，便可用完成這樣的功能。舉例來說：

　　我要做一個介紹HTML5 history的頁面，index.html中的代碼如下：

<body>
<p>HTML5 history API 介紹</p>
<a href="javascript:void(0)" id="pushstate">history.pushState(data, title [, url])</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript:void(0)" id="replacestate">history.replaceState(data, title [, url]) </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript:void(0)" id="onpopstate">window.onpopstate</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript:void(0)" id="back">返回</a>
<div id="loaddiv"></div>
<script>

$(function(){
    
    var loaddiv = $('#loaddiv');
　　
　　//點擊不同的鏈接，分別在loaddiv中加載不同的內容

    $('#pushstate').click(function(){
        loaddiv.load('1.php?stype=push');
        history.pushState({title:'push',url:'1.php?stype=push'});
        });
    $('#replacestate').click(function(){
        loaddiv.load('1.php?stype=replace');
        history.pushState({title:'replace',url:'1.php?stype=replace'});
        });
    $('#onpopstate').click(function(){
        loaddiv.load('1.php?stype=onpop');
        history.pushState({title:'onpop',url:'1.php?stype=onpop'});
        });

　　//點擊返回，讓瀏覽器后退一步
    $('#back').click(function(){
        history.back();
        });
       
　　//兼聽popstate事件，可以取到e.state的值，其中保存了你調用pushState方法時傳入的數據，根據數據中的url異步加載相應內容。便實現了點擊返回時頁面上的數據保持是上次加載過的。
    window.onpopstate = function(e){
        if(e.state){
            loaddiv.load(e.state.url);
            }
    }
    
    });
</script>
</body>

　　我要分別介紹history的三個新特性，通過調用jquery的load方法來異步加載，發送一個請求到1.php，同時傳遞對應的參數。后臺接受到請求后根據不同的參數返回不同的數據，php代碼如下：

<?php
$type = $_REQUEST['stype'];
switch($type){
    case 'push' :  
    echo 'history.pushState(data, title [, url])：往歷史記錄堆棧頂部添加一條記錄；data會在onpopstate事件觸發時作為參數傳遞過去；title為頁面標題，當前所有瀏覽器都會 忽略此參數；url為頁面地址，可選，缺省為';
    break;
    case 'replace' :  
    echo 'history.replaceState(data, title [, url]) ：更改當前的歷史記錄，參數同上';
    break;
    case 'onpop' :  
    echo 'window.onpopstate：響應pushState或replaceState的調用；';
    break;
    }
?>