我们知道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. MVC之文件上传1

    MVC之文件上传 前言 这一节我们来讲讲在MVC中如何进行文件的上传,我们逐步深入,一起来看看. Upload File(一) 我们在默认创建的项目中的Home控制器下添加如下: public Act ...

  2. 向GridView的模板列绑定OnClientClick的函数时出现了奇怪的问题

    原文:向GridView的模板列绑定OnClientClick的函数时出现了奇怪的问题 GridView的一个模板列中的内容是按钮,需要实现以下的效果: GridView分页显示数据,点击编辑按钮(模 ...

  3. poj2479（dp）

    题目链接:http://poj.org/problem?id=2479 题意:求所给数列中元素值和最大的两段子数列之和. 分析:从左往右扫一遍,b[i]表示前i个数的最大子数列之和. 从右往左扫一遍, ...

  4. NYOJ115 市叛乱 【SPFA】

    城市平乱 时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描写叙述 南将军统领着N个部队,这N个部队分别驻扎在N个不同的城市. 他在用这N个部队维护着M个城市的治安,这M个城市 ...

  5. （转载)浅析error LNK2001: unresolved external symbol "public: __thisc...

    学习VC++时经常会遇到链接错误LNK2001,该错误非常讨厌,因为对于      编程者来说,最好改的错误莫过于编译错误,而一般说来发生连接错误时,      编译都已通过.产生连接错误的原因非常多 ...

  6. MAC地址格式小结

    之前一段时间在做网卡驱动的工作,如今产品量产,利用ifconfig eth hw ether在配置mac地址时发现一个问题, 随机配置一个mac地址,发现有的会报出Cannot assign requ ...

  7. 源代码编译安装 PHP5.5.0，解决curl_exec訪问HTTPS返回502错误的问题

    近期碰到一个奇怪的问题. PHP使用 curl_exec 訪问 HTTPS 网页时, 返回502错误, 訪问HTTP网页时没有问题,  用   echo   phpinfo() ;  查看. 支持op ...

  8. OUI-67076 : OracleHomeInventory was not able to create a lock file&quot; in Unix

    Symptoms The command "opatch lsinventory" reports the error: OUI-67076:OracleHomeInventory ...

  9. Leetcode_191_Number of 1 Bits

    本文是在学习中的总结.欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/44486547 Write a function that ...

  10. Class Diagram