我们知道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. WPF案例 (三) 模拟QQ“快速换装"界面

    原文:WPF案例 (三) 模拟QQ"快速换装"界面 这个小程序使用Wpf模拟QQ快速换装页面的动画特效,通过使用组合快捷键Ctrl+Left或Ctrl+Right,可实现Image ...

  2. openjpa框架入门_Demo概览(一)

    我个人所了解并学习的openjpa日志(一) 最近一直研究openjpa,想把自己所了解的写成日志,和大家一起学习,一起进步. 整个过程,会有一个完整的经过改造过openbook demo可运行. O ...

  3. DIV+CSS 入门

    玩一小会儿前csdn什么时候,页面上的加qq而微博,我认为这是美好的.牛腩完成.运营商也开始了他真正的学习B/S之旅. 刚開始的时候,我不知道<div>是什么 也不清楚CSS用来干什么的, ...

  4. poj3237（树链剖分）

    题目链接:http://poj.org/problem?id=3237 题目大意:指定一颗树上有3个操作: 1)询问操作,询问a点和b点之间的路径上最长的那条边的长度(即最大值): 2)取反操作,将a ...

  5. OpenCV 通过 MFC 的 Picture Control 控件操作图像

    假设希望对显示在MFC Picture Control 控件里的图像进行操作,比方画线画点之类的,能够利用 OpenCV 结合 MFC 本身的鼠标响应函数来实现. 怎样将图像显示到 Picture C ...

  6. 创建和关联内容数据库到指定Web应用程序和站点集

    创建和关联内容数据库到指定Web应用程序和站点集         一个Web应用程序不限于使用单个内容数据库.SharePoint同意你关联多个内容数据库到Web应用程序.原因之中的一个是基于内容数据 ...

  7. Jersey的RESTful简单案例demo

    REST基础概念: 在REST中的一切都被认为是一种资源. 每个资源由URI标识. 使用统一的接口.处理资源使用POST,GET,PUT,DELETE操作类似创建,读取,更新和删除(CRUD)操作. ...

  8. 【Android Training - UserInfo】记住登入用户的信息[Lesson 1 - 使用AccountManager来记住用户]

    Remembering Your User[记住你的用户] 每一个人都非常喜欢自己的名字能被人记住.当中最简单,最有效的使得你的app让人喜欢的方法是记住你的用户是谁,特别是当用户升级到一台新的设备或 ...

  9. hdu1754(splay)

    给n个数,有两种操作    Q a b   询问区间[a,b]的最大值,  U a b 将第a个数的值改成b splay树的中序遍历是我们所维护的序列.如果要询问区间[a,b]的最大值,那么只要将第a ...

  10. Big Event in HDU（杭电1171）（多重背包)和（母函数）两种解法

    Big Event in HDU Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...