HTML5 history API实践

时间：2023-07-17 11:09:20

一、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;

    }

?>

　　我在这里无法上传php文件，你可以将代码复制到本地服务器测试。如此一来，便可以实现像github那样的页面加载机制。

　　以上便是我所见到过的关于history的两点使用方法。有发现错误欢迎指正，其他观点也欢迎交流。

相关文章