HTML5 history API實踐

時間 2019-11-20

標籤 html5 html history api 實踐欄目 HTML5 简体版

原文原文鏈接

1、history API知識點總結

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

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

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

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

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

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參數。

2、新API在實際中的使用

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

　　① 還原ajax程序中瀏覽器後退按鈕的功能。其實這個應用已經被你們普遍熟知了，因爲ajax的固有缺點（沒法使用瀏覽器後退按鈕返回上一頁），經過在發起ajax請求時在歷史記錄中添加一條記錄並修改地址欄中的值，來模擬一個正常的跳轉，同時仍然保留ajax異步加載的優勢。方法以下：java

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

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

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

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

<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代碼以下：ajax

<?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;
    }
?>

　　我在這裏沒法上傳php文件，你能夠將代碼複製到本地服務器測試。如此一來，即可以實現像github那樣的頁面加載機制。json

　　以上即是我所見到過的關於history的兩點使用方法。有發現錯誤歡迎指正，其餘觀點也歡迎交流。瀏覽器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。