HTML5 history API实践-阿里云开发者社区

开发者社区> 技术mix呢> 正文

HTML5 history API实践

简介:
+关注继续查看

一、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的两点使用方法。有发现错误欢迎指正,其他观点也欢迎交流。

本文转自吕大豹博客园博客,原文链接:http://www.cnblogs.com/lvdabao/p/3253071.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
一文快速搞定Redis_数据类型及JavaApi操作
大家好,我是**ChinaManor**,直译过来就是中国码农的意思,我希望自己能成为国家复兴道路的铺路人,大数据领域的耕耘者,平凡但不甘于平庸的人。
7 0
计算机基础2 | 学习笔记
快速学习计算机基础2。
10 0
Vue 仿钉钉流程图(流程节点绘制 vue+Ant【如果用其他UI库需要替换几个组件】 附 demo)
# [这里是git地址](https://gitee.com/xiaoyaoluntian/imitating-dingding-flow-chart/tree/comdemo/)
6 0
Vue 集成腾讯地图基础api Demo集合(基础地图引入与展示模块,地址逆解析,3D/2D切换 ,位置服务,mark标记)
Vue 集成腾讯地图基础api Demo集合(基础地图引入与展示模块,地址逆解析,3D/2D切换 ,位置服务,mark标记)
7 0
数据类型-数值和字符串 | 学习笔记
快速学习数据类型-数值和字符串。
5 0
作用域及作用域链 | 学习笔记
快速学习作用域及作用域链。
5 0
代码注释 | 学习笔记
快速学习代码注释。
9 0
求数组元素的和 | 学习笔记
快速学习求数组元素的和。
6 0
函数的返回值 | 学习笔记
快速学习函数的返回值。
6 0
函数当作参数2 | 学习笔记
快速学习函数当作参数2。
6 0
+关注
2969
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载