上一篇文章中。我们使用location.hash来模拟ajax的前进后退功能。使用location.hash存在以下几个问题：

1.使用location.hash会导致地址栏的url发生变化。用户体验不够友好。

2.location.hash产生的历史记录无法改动。每次hash改变都会导致产生一个新的历史记录。

3.location.hash仅仅是1个字符串，不能存储非常多状态相关的信息。

为了解决这些问题，HTML5中引入了history.pushState()、history.replaceState()、popstate事件来处理浏览器历史记录的问题。

以下的代码能够达到跟location.hash同样的效果，能够看到地址栏url不会改变。

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<script type="text/javascript" src="jquery-1.11.1.min.js"></script>

	<script type="text/javascript">		

		var currentPageIndex = 0;

		window.onload = function(){

			currentPageIndex = 0;

			showPageAtIndex(currentPageIndex);

			addHistory(currentPageIndex);

		}

		// onpopstate能够监控state变化

		window.onpopstate = function(e){

			if(history.state)

			{

				var state = history.state;

				showPageAtIndex(state.id);

			}

		}

		function toNextPageWhenClick()

		{

			currentPageIndex++;

			if(isValidPageIndex(currentPageIndex))

			{

				showPageAtIndex(currentPageIndex);

				addHistory(currentPageIndex);

			}

			else

			{

				return;

			}

		}

		function showPageAtIndex(id)

		{

			$("div[id!="+id+"]").hide();

			$("#"+id).show();

			if(isHomePage(id))

			{

				$("input").attr("value","current is home page,next page=1");

			}

			else if(isLastPage(id))

			{

				$("input").attr("value","current page="+id+", it is the end.");

			}

			else

			{

				$("input").attr("value","current page="+id+",next page="+(id+1));

			}

		}

		function isValidPageIndex(id)

		{

			return id <= 5;

		}

		function isLastPage(id)

		{

			return id == 5;

		}

		function isHomePage(id)

		{

			return id == 0;

		}

		// 添加历史记录

		function addHistory(id)

		{

			history.pushState({"id":id},"","");

		}

	</script>

	<style>

		.navigate{

			height:100px;

			width:300px;

			background-color:#0000ff;

			display:none;

		}

		.home{

			height:100px;

			width:300px;

			background-color:#00ff00;

			display:none;

		}

		.last{

			height:100px;

			width:300px;

			background-color:#ff0000;

			display:none;

		}

	</style>

</head>

<body>

	<input type="button" value="" onclick="toNextPageWhenClick();">

	<div class="home" id="0">HOME PAGE</div>

	<div class="navigate" id="1">ajax1</div>

	<div class="navigate" id="2">ajax2</div>

	<div class="navigate" id="3">ajax3</div>

	<div class="navigate" id="4">ajax4</div>

	<div class="last" id="5">last page</div>

</body>

</html>

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYWl0YW5neW9uZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYWl0YW5neW9uZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

使用history.pushState()和popstate事件实现AJAX的前进、后退功能的更多相关文章

  1. pushState()、popstate事件配合ajax实现浏览器前进后退页面局部刷新

    最近研究pushState,看了网上的文章还是不怎么会用,于是自己摸索着理解使用,终于实现局部刷新同时前进后退. 首先说说pushState(),这个函数将当前的url等信息加入history堆栈中: ...

  2. 监听浏览器返回，pushState，popstate 事件，window.history对象

    在WebApp或浏览器中,会有点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面.确认离开页面或执行一些其它操作的需求.可以使用 popstate 事件进行监听返回.后退.上一页操作. 一 ...

  3. 关于histry的pushstate 和 popstate事件的应用

    这篇文章是基础:http://www.cnblogs.com/kaituorensheng/p/3776527.html: histry的单页面应用有两个写法:哈希值和?: 哈希值例子: 实现效果:点 ...

  4. Ajax异步刷新地址栏url改变（利用Html5 history.pushState实现）

    早些时候在博客园参阅了不少资料,然后决定入驻博客园分享自己的开发心得,最近准备转方向筹备着辞职交接工作,所以有点忙碌,搁置了一个月才匆匆写下这么一篇随笔,希望能给大家带来一点帮助吧,资料和学识有限,如 ...

  5. ajax与HTML5 history pushState/replaceState实例

    一.本文就是个实例展示 三点: 我就TM想找个例子,知道如何个使用,使用语法什么的滚粗 跟搜索引擎搞基 自己备忘 精力总是有限的,昨天一冲动,在上海浦东外环之外订了个90米的房子,要借钱筹首付.贷款和 ...

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

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

  7. window.history.pushState与ajax实现无刷新更新页面url

    ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...

  8. Javascript history pushState onpopstate方法做AJAX SEO

    参考MDN: https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history https://develop ...

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

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

随机推荐

  1. 从sizeof(string)到引用计数的漫游

    前言: 说是漫游,其实就是扯,一点一点的扯. 话说之前参加华为的德州扑克比赛,我用C++解析消息的时候碰到一个小问题,就是定长收消息的时候出错,在Linux下调了很久很久,终于发现,sizeof(st ...

  2. 【wordpress】 $wpdb 应用实例

    <?php require_once('e:/php/wordpress/wp-blog-header.php');//注释掉这一句就出错了 global $wpdb; $a = $wpdb-& ...

  3. HDU 1465.装错信封-递推

    不容易系列之一 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  4. HDU 多校1.10

  5. tarjan算法与无向图的连通性(割点，桥，双连通分量，缩点)

    基本概念 给定无向连通图G = (V, E)割点:对于x∈V,从图中删去节点x以及所有与x关联的边之后,G分裂为两个或两个以上不相连的子图,则称x为割点割边(桥)若对于e∈E,从图中删去边e之后,G分 ...

  6. Github上的iOS资料-个人记录

    动画 awesome-ios-animation收集了iOS平台下比较主流炫酷的几款动画框架 RCTRefreshControlqq的下拉刷新 TBIconTransitionKiticon 的点击动 ...

  7. delphi模态窗口跑到后面的解决办法

      Delphi(68)  procedure TForm1.ShowForm2;begin  Self.Enabled := False;  try    with TForm2.Create(ni ...

  8. 转载：win10 下安装32位的Oracle 11g 客户端（问题：环境不满足最低要求）

    1. 在安装文件夹中,找 stage->cvu->cvu_prereq.xml文件. 2. 用记事本打开其xml文件进行编辑,加下面一段保存. <OPERATING_SYSTEM R ...

  9. CSS中样式

    CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离.要想让CSS对网页内容有效果,必须将CSS代码引入网页,通常有四 ...

  10. http://www.oschina.net/question/1019034_153316

    http://www.oschina.net/question/1019034_153316 http://www.oschina.net/question/97503_212116?sort=tim ...