看标题是不是感觉很拽的样子，其实没什么啦，也就是时下常说的单页面应用。这种web形式在如今的移动端十分流行，毕竟在移动端频繁得去刷新界面不是很友好，而且还费流量。今天我们要做一个小的app（移动端），来揭秘history的秘密。首先我们了解一下核心方法：

　　window.history.pushState:方法：为histroy建立历史记录，该方法传入三个函数:1、对应url的信息2、下一个界面的title 3 、需要你动态改变的地址栏中德url.

　　window.history.state:属性：当前的history中的信息状态。

　　window.history.replaceState:方法：以本次信息替换之前的history内容记录，传入的参数与第一个相同。

　　首先，你不必执着于上面的一些定义。在我第一次看到这些说明的时候我也是一头雾水，真正了解他们是在使用它们之后。事不宜迟，我们首先创造出html结构来:

　　要实现简单的界面切换，我们首先要创建出三个界面，当然为了方便，这三个界面就是是三个div（a,b,c 整屏大，绝对定位）和一个按钮（用来添加历史内容记录）:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>history back</title>
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <script type="text/javascript" src="zepto.js"></script>
  7.     <link rel="stylesheet" type="text/css" href="history.css">
  8. </head>
  9. <body>
  10.     <div class="a"><p>What we talk about when we talk about love</p><span>A</span></div>
  11.     <div class="b none"><p>Quell nous sommes parlons lorsqur nous parlons d'amour</p><span>B</span></div>
  12.     <div class="c none"><p>当我们在談論爱情的时候，我们在談論些什么</p><span>C</span></div>
  13.     <button class="forward">FORWARD</button>
  14. </body>
  15. </html>

　　翻页效果，可以简单一些，在这里，我做了动画，利用css3的3d动画属性，打造简单的动画效果。如果你觉得麻烦，可以直接元素的显示和隐藏，但在实际的项目中，我推荐利用动画过度效果，这样不仅提高客户体验，而且你可以利用到css3的许多新特新，对于web2.0时代的前端精英来说这是必修课。下面是切换效果的css代码：

  1. @-webkit-keyframes sliderightout{from{-webkit-transform:translateX(0px);}to{-webkit-transform:translateX(50%);}}
  2. @-webkit-keyframes slideleftin{from{-webkit-transform:translateX(-50%);}to{-webkit-transform:translateX(0px);}}
  3. @-webkit-keyframes slideleftout{from{-webkit-transform:translateX(0px);}to{-webkit-transform:translateX(-50%);}}
  4. @-webkit-keyframes sliderightin{from{-webkit-transform:translateX(50%);}to{-webkit-transform:translateX(0px);}}
  5.  
  6. .slideleftout{-webkit-animation:slideleftout 350ms ease-in-out;}
  7. .slideleftin{-webkit-animation:slideleftin 350ms ease-in-out;}
  8. .sliderightout{-webkit-animation:sliderightout 350ms ease-in-out;}
  9. .sliderightin{-webkit-animation:sliderightin 350ms ease-in-out;}
  10. .animatestart{position:absolute;top:0;left:0;z-index:3;width:100%;height:100%;overflow-x:hidden}
  11. .animatestart.page-container{overflow-x:hidden;-webkit-transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;background-color:#f5f5f5}

　　然后是控制界面各个元素的显示位置的css代码，排列组合各个界面（div p button span）。

  1. *{
  2. 	padding: 0;
  3. 	margin: 0;
  4. }
  5. .none {
  6. 	display: none;
  7. }
  8. div {
  9.   position: absolute;
  10.   height: 100%;
  11.   width: 100%;
  12.   color: #fff;
  13. }
  14. div span {
  15. 	display: block;
  16. 	font-size: 6.5em;
  17. 	text-align: center;
  18. }
  19. div p {
  20. 	font-size: 1.2em;
  21. }
  22. button {
  23.   position: absolute;
  24.   height: 40px;
  25.   width: 100px;
  26.   border-radius: 6px;
  27.   background: #fff;
  28.   bottom: 50px;
  29.   border: 0;
  30. }
  31. button.back {
  32.   left: 20px;
  33. }
  34. button.forward {
  35. 	right: 20px;
  36. }
  37. .a {
  38. background: #19a39e;
  39. }
  40.  
  41. .b{
  42. background: rgb(245, 81, 81);
  43. }
  44. .c{
  45. background: rgb(71, 142, 30);
  46. }

　　接下来是重点，我们的思路是首先给浏览器的历史填充记录，这个需要手动完成，这也就是button的使命，因此，我们首先绑定forward按钮:

  1. //首先给history添加一条记录，使得第一个界面和后来的界面看起来是永远的以page=x结尾
  2. window.history.pushState({info:'a'}, 'Page', '?page=a');
  3. //数据源
  4. var source = [
  5. 	{cls:'a', url:'?page=a'},
  6. 	{cls:'b', url:'?page=b'},
  7. 	{cls:'c', url:'?page=c'}
  8. ],
  9. //数据源的下表，
  10. k = 0,
  11. //界面涨势的属性列表
  12. index = ['a', 'b', 'c'],
  13. //记录每个界面跳转的顺序的列表
  14. stoage = [];    
  15.  
  16. //绑定按钮的tap事件，我们在移动端做测试，用的是tap，zepto会帮我们转译该事件
  17. $('.forward').on('tap', function(){
  18. 	if(source[k]) {
  19. 		//取下一个界面的数据源
  20. 		var m = source[++k];
  21. 		//在这里填充history记录，pushstate是方法是不会引起界面刷新的，但是却会改变浏览器的回退/前进行为，执行这一步的时候可以看到地址栏中的url变化了。
  22. 		window.history.pushState({info:m.cls}, 'Page', m.url);
  23. 		//储存该节目名称到stoage列表中
  24. 		stoage.push(window.history.state.info);
  25. 		//下面是切换的动画，因为这里力求简单做的是一直向前走的动作，所以动画是从右到左的切换顺序
  26. 		$('.' + m.cls).removeClass('none').addClass("animatestart sliderightin");
  27. 		setTimeout(function(){ //动画结束时重置class
  28.             $('.'+ source[k -1].cls).addClass('none');
  29.             $('.' + m.cls).removeClass('animatestart sliderightin');
  30.         }, 350);
  31. 	}
  32. })

　　上面做的事情，还仅仅是在界面中利用dom事件跳转界面，要利用前进和后退按钮实现无刷新跳转节目我们需要侦听popstate事件，也就是回退/前进行为的事件：

  1. //利用stoage的存储和index列表中的先后规则，放回动画翻转顺，是从左到右，还是从右到左
  2. function j() {
  3. 	var l = stoage.length;
  4. 	if(index.indexOf(stoage[l-2]) < index.indexOf(stoage[l-1])) {
  5. 		return 'animatestart sliderightin';
  6. 	}else{
  7. 		return 'animatestart slideleftin';
  8. 	}
  9. }
  10. //开始监听浏览器的前进/后退行为
  11. $(window).on('popstate', function(state) {
  12. 	//移除按钮
  13. 	$('.forward').remove();
  14. 	//将本界面名称存入stoage列表中
  15. 	stoage.push(window.history.state.info);
  16. 	//取得上一个界面的名称
  17. 	var thiscls = stoage[stoage.length - 2];
  18. 	//取得当前界面的名称
  19. 	var nextcls = stoage[stoage.length - 1];
  20. 	//对比两个界面获得动画效果
  21. 	var cls = j();
  22. 	//执行动画效果
  23. 	$('.' + nextcls).removeClass('none').addClass(cls);
  24. 		setTimeout(function(){ //动画结束时重置clas
  25.             $('.'+ thiscls).addClass('none');
  26.             $('.' + nextcls).removeClass(cls);
  27.         }, 350); 
  28.  
  29. });

　　通过点击按钮，这时候看到，浏览器的回退按钮已经可以启用，我们点击回退，观察url的变化和界面的切换变化

　　page=c变成了page=b，动画效果是从左到右，界面就这样切换成功，界面并无刷新，多试几次。

A->B

B->C

　　这样我们就实现了点击回退/前进按钮实现单界面无刷新切换了。

　　事情还有另一种做法，即使利用hash变化监听onhashchange来实现无刷新的界面切换，你一定想到了backbone就是这样做的。不过对于小一点的项目，我建议用'?'（传值）不是'#'号（hash），因为无刷下跳转意味着和利器ajax一起使用，使用‘？’号的好处是，即使用户强制刷新了界面，我们也可以给后台传参数，告诉后台我们正处于哪一个界面，需要什么样的数据，从而和前段的ajax统一起来。因为？号代表search，刷新的时候给后台会传入get类型的数据的。而#号（hash值）却并不会这样做。当然，你可以使用你的聪明才智改变这种情况，那就见仁见智了。

利用history实现无刷新跳转界面的更多相关文章

  1. 有趣的API： history pushState/popstate 无刷新跳转(pjax)

    API介绍 首先看看API如何使用: history.pushState(state, title, url) : 无刷新的向浏览器 历史最前方 加入一条记录. state(any) 需要保存的数据, ...

  2. 通过history.pushState无刷新改变url

    通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...

  3. history.pushState无刷新改变url

    通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...

  4. 使用ajax和history.pushState无刷新改变页面URL onpopstate（转）

    Javascript代码 var htmlData1 = $.ajax(    {    url: "/getXXXResponse",    async: false }).re ...

  5. ajax与HTML5 history API实现无刷新跳转

    一.ajax载入与浏览器历史的前进与后退 ajax可以实现页面的无刷新操作,但是无法前进与后退,淡出使用Ajax不利于SEO.如今,HTML5让事情变得简单.当执行ajax操作时,往浏览器histor ...

  6. 使用ajax和history.pushState无刷新改变页面URL

    表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...

  7. 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 使用ajax和history.pushState无刷新改变页面URL(转)

    表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...

  9. 黄聪：Pjax无刷新跳转页面实现，支持超链接与表单提交

    什么是pjax? 当你点击一个站内的链接的时候,不是做页面跳转,而是只是站内页面刷新.这样的用户体验,比起整个页面都闪一下来说, 好很多. 其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏 ...

随机推荐

  1. tensorflow中的lstm的state

        考虑 state_is_tuple     Output, new_state = cell(input, state)     state其实是两个 一个 c state,一个m(对应下图的 ...

  2. *****linux下redis安装

    我用的系统是:redhat [root@infa ~]# wget http://download.redis.io/releases/redis-2.8.12.tar.gz tar xzf redi ...

  3. 【Java EE 学习 79 下】【动态SQL】【mybatis和spring的整合】

    一.动态SQL 什么是动态SQL,就是在不同的条件下,sql语句不相同的意思,曾经在“酒店会员管理系统”中写过大量的多条件查询,那是在SSH的环境中,所以只能在代码中进行判断,以下是其中一个多条件查询 ...

  4. 配置比对脚本(python)

    # -*- coding: utf- -*- from datetime import * import MySQLdb import sys import time import datetime ...

  5. 【leetcode】Compare Version Numbers

    题目描述: Compare two version numbers version1 and version2. If version1 > version2 return 1, if vers ...

  6. 修复 OS X 的系统盘出现 Invalid Node Structure 问题

    昨晚我的MBP突然出现启动的时候会自动关机的问题.开机进入到 Recovery 模式之后,用 Disk Utility 检查系统盘,发现 Invalid Node Structure 错误, Disk ...

  7. windows7 64位下环境搭建scrapy爬虫框架

    适用于python 2.7 64位安装 一.操作系统:WIN7 64位 二.python版本:2.7 64位(scrapy目前不支持3.x) 不确定位数的,看图

  8. WebRTC音频预处理单元APM的整体编译及使用

    正文 行的gnu静态库链接路径是针对NDK版本 r8d 的,如读者版本不匹配,请自行找到 libgnustl_static.a 静态库的路径进行替换. 3)本示例并不打算编译 WebRTC 的测试工程 ...

  9. git使用

    1.权限校验 首先,您的数据保存在远端服务器一份,服务器需要对您的身份进行识别,一段RAS加密字串, 启动GUI,step1:创建秘钥,generate SSHkey. step2:添加密钥:去你的代 ...

  10. Vue - 自定义指令

    1.Vue.directive(id,definition)注册一个全局自定义指令,接收两个参数,指令ID以及定义对象 2.钩子函数:将作用域与DOM进行链接,链接函数用来创建可以操作DOM的指令 b ...