我们知道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. 使用RouteDebugger对MVC路由进行调试

    在Asp.Net MVC程序中,路由是MVC程序的入口,每一个Http请求都要经过路由计算,然后匹配到相应的Controller和Action.通常我们的路由都会注册在Global.asax.cs文件 ...

  2. SpringMVC与Mybatis框架整合遇到的坑（转）

    最近在做springmvc与mybatis的项目,遇到一些比较坑的问题.花了许多时间却发现其实解决的办法很简单.这里主要是讲我自己在整合这两个框架的时候遇到的一些问题做一个整理.希望遇到和我同样问题的 ...

  3. hdu1028(整数划分问题)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1028 整数划分问题 整数划分 --- 一个老生长谈的问题: 描述 整数划分是一个经典的问题.请写一个程 ...

  4. [LeetCode] Search for a Range [34]

    题目 Given a sorted array of integers, find the starting and ending position of a given target value. ...

  5. 处理json中影响解析的多余引號

    在xml中,敏感字符是尖括号,在json中,敏感字符是引號,上文中我们介绍了怎样处理xml中的敏感字符.本文说说怎样处理json中的敏感字符. 思路与上文同样,不再赘述.直接上代码: json–> ...

  6. sitemap.xml

    内部类  在类内部的类 1.解决多继承 2.解决继承和实现接口时候方法名冲突情况 3.实现数据隐藏 只有内部类可以拥有4种访问修饰符 当内部类为private的时候,有外部类提供方法来访问内部类 常规 ...

  7. SQL Server ：理解数据记录结构

    原文:SQL Server :理解数据记录结构 在SQL Server :理解数据页结构我们提到每条记录都有7 bytes的系统行开销,那这个7 bytes行开销到底是一个什么样的结构,我们一起来看下 ...

  8. Google Map API V2密钥申请

    之前用的都是v1,用的是MapView,好吧,仅仅能认命了.废话不再多说,開始android 的Google Maps Android API v2吧 之前參考了http://www.cnblogs. ...

  9. IOS设计模式学习（20）命令

    1 前言 在面向对象中,把指令封装在各种命令对象中.命令对象可以被传递而且在指定时刻被不同的客户端复用.这一概念精心设计而来的设计模式叫做命令(Command)模式. 2 详述 2.1 简述 命令对象 ...

  10. Easy 2048 Again - ZOJ 3802 像缩进dp

    Easy 2048 Again Time Limit: 2 Seconds      Memory Limit: 65536 KB Dark_sun knows that on a single-tr ...