我们知道JavaScript中非常早就提供了window.history对象，利用history对象的forward()、go()、back()方法可以方便实现不同页面之间的前进、后退等这样的导航功能。

可是AJAX操作。是不能用浏览器的前进和后退button进行导航的，由于浏览器并不会将AJAX操作增加到历史记录中。可是借助location.hash，我们可以自己实现AJAX操作的前进和后退。关于window.location.hash的具体介绍和使用方式，可以參考以下这2篇文章。

location.hash具体解释和   6
Things You Should Know About Fragment URLs。

我们须要知道下面2点：

1.假设location.hash发生了变化，那么浏览器地址栏url会发生变化。并且浏览器会产生1个历史记录。

2.假设location.hash发生了变化，会产生一个hashchange事件，我们能够处理这个事件。

<!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);

			recordHash(currentPageIndex);

		}

		// onhashchange能够监控hash变化

		window.onhashchange=function(){

			var hash = window.location.hash;

			var id = parseInt(hash.substr(1));

			showPageAtIndex(id);

		};

		function toNextPageWhenClick()

		{

			currentPageIndex++;

			if(isValidPageIndex(currentPageIndex))

			{

				showPageAtIndex(currentPageIndex);

				recordHash(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;

		}

		// hash改变,浏览器会自己主动生成一个历史记录

		function recordHash(id)

		{

			window.location.hash=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>

在chrome下执行这个html文件，默认显示home page，点击button的时候回调到下一个页面(直到最后一个页面为止)。我们能够点击浏览器的前进、后退button，实现模拟ajax前进、后退的功能。

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

一个简单的样例看明确怎样利用window.location.hash实现ajax操作时浏览器的前进/后退功能的更多相关文章

  1. 使用CEF（二）— 基于VS2019编写一个简单CEF样例

    使用CEF(二)- 基于VS2019编写一个简单CEF样例 在这一节中,本人将会在Windows下使用VS2019创建一个空白的C++Windows Desktop Application项目,逐步进 ...

  2. JBoss 系列九十六：JBoss MSC - 简介及一个简单演示样例

    什么是 JBoss MSC JBoss MSC 即 JBoss Modular Service Container,是第三代 JBoss 产品 JBoss 7和WildFfly的内核,JBoss MS ...

  3. 一则简单演示样例看Oracle的“无私”健壮性

    Oracle的强大之处就在于他能总帮助让你选择正确的运行计划,即使你给了它错误的指示. 实验: 1. 创建測试表: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZ ...

  4. socket编程——一个简单的样例

    从一个简单的使用TCP样例開始socket编程,其基本过程例如以下: server                                                  client ++ ...

  5. Yii学习笔记之二（使用gii生成一个简单的样例）

    1. 数据库准备 (1) 首先我们建一数据库 yii2test 并建立一张表例如以下: DROP TABLE IF EXISTS `posts`; CREATE TABLE `posts` ( `po ...

  6. 初始化错误——从一个简单的算例看UDF各个宏的调用顺序

    感谢西安交通大学en_phert的问题和尝试 Fluent版本:Fluent 19.0 Visual Studio版本:Visual Studio 2013 在UDF的宏的调用中大家常看见下图: 这个 ...

  7. 一个简单演示样例来演示用PHP訪问表单变量

    首先编写表单页面orderform.html,用post方法请求服务端脚本文件:processorder.php orderform.html: <!DOCTYPE html> <h ...

  8. Android中关于JNI 的学习（零）简单的样例，简单地入门

    Android中JNI的作用,就是让Java可以去调用由C/C++实现的代码,为了实现这个功能.须要用到Anrdoid提供的NDK工具包,在这里不讲怎样配置了,好麻烦,配置了好久. . . 本质上,J ...

  9. Android中关于JNI 的学习（四）简单的样例，温故而知新

    在第零篇文章简单地介绍了JNI编程的模式之后.后面两三篇文章,我们又针对JNI中的一些概念做了一些简单的介绍,也不知道我究竟说的清楚没有.但相信非常多童鞋跟我一样.在刚開始学习一个东西的时候,入门最好 ...

随机推荐

  1. 读懂Java中的Socket编程(转)

    Socket,又称为套接字,Socket是计算机网络通信的基本的技术之一.如今大多数基于网络的软件,如浏览器,即时通讯工具甚至是P2P下载都是基于Socket实现的.本文会介绍一下基于TCP/IP的S ...

  2. hdu1495（bfs）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1495 题意:有三个杯子,开始时第一个杯子装满水(体积为a),倒来倒去,得到其中2个杯里的水的体积都为a ...

  3. PPPOE 模拟环境搭建

    这段时间.包含我自己測试OTT盒子 PPPOE的时候比較痛苦.要不就是在别人的位置上測试.要不就是借用PPPOE的设备,认为还是自己搭建一个PPPOE真实拨号上网的环境多好! 可是坑爹的win7找不到 ...

  4. Photon + Unity3D 在线游戏开发 学习笔记(两)

    本文和大家 和大家说说 Photon 解压后的目录结构 这里面最基本的我们 以后开发要用到的目录 就是  deploy目录,这个目录里 放的是要挂载的 server 当然我们的 server端也要放在 ...

  5. 深入了解HTTP协议、HTTP协议原则

    ttp协议学习系列 1. 基础概念篇 1.1 介绍 HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写. 它的发展是万维网协会(World Wide Web C ...

  6. 安装配置gerrit

    Centos 安装配置gerrit 关闭selinux,不然nginx的反向代理会报错connect() to 127.0.0.1:8080 failed (13: Permission denied ...

  7. ID设计

    ID设计 在分布式系统中,经常需要使用全局唯一ID查找对应的数据.产生这种ID需要保证系统全局唯一,而且要高性能以及占用相对较少的空间. 全局唯一ID在数据库中一般会被设成主键,这样为了保证数据插入时 ...

  8. Oracle连接池

    原由:许多用户可能在查询相同的数据库以获取相同的数据.在这些情况下,可以通过使应用程序共享到数据源的连接来提高应用程序的性能.否则,让每个用户打开和关闭单独的连接的开销会对应用程序性能产生不利影响.这 ...

  9. oracle看到用户的所有表名、表睐、字段名称、现场的目光、是空的、字段类型

    --oracle看到用户的所有表名.表睐.字段名称.现场的目光.是空的.字段类型 select distinct TABLE_COLUMN.*, TABLE_NALLABLE.DATA_TYPE, T ...

  10. Java&Android反编工具打包

    Java&Android反编工具: 1.Eclipse反编插件:安装到Eclipse后,可以简要的查看jar包中的*.class; 2.DoAPK:反编*.apk为smali和一些资源文件,可 ...