上一篇文章中。我们使用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. AC日记——Red and Blue Balls codeforces 399b

    399B - Red and Blue Balls 思路: 惊讶的发现,所有的蓝球的消除都是独立的: 对于在栈中深度为i的蓝球消除需要2^i次操作: 代码: #include <cstdio&g ...

  2. [libgdx游戏开发教程]使用Libgdx进行游戏开发(11)-高级编程技巧 Box2d和Shader

    高级编程技巧只是相对的,其实主要是讲物理模拟和着色器程序的使用. 本章主要讲解利用Box2D并用它来实现萝卜雨,然后是使用单色着色器shader让画面呈现单色状态:http://files.cnblo ...

  3. webpack + react 前端工程化实践和暂不极致优化

    技术结构 webpack + react + react-router 功能实现 关于打包 1.基于react-router的自定义打包code split.2.分包异步按需加载.3.CommonsC ...

  4. UVA 10341.Solve It-二分查找

    二分查找 二分查找又称折半查找,优点是比较次数少,查找速度快,平均性能好:其缺点是要求待查表为有序表,且插入删除困难.因此,折半查找方法适用于不经常变动而查找频繁的有序列表.首先,假设表中元素是按升序 ...

  5. HDU 1013 Digital Roots（字符串，大数，九余数定理）

    Digital Roots Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  6. 数位dp模版（dp）

    #include <cstdio> #include <cstring> #include <iostream> #include <algorithm> ...

  7. hdu6162（树链剖分）

    hdu6162 题意 给出一颗带点权的树,每次询问一对节点 \((u, v)\),问 \(u\) 到 \(v\) 的最短路径上所有节点权值在 \([c1, c2]\) 区间内的和. 分析 树链剖分,那 ...

  8. luogu P1064 金明的预算方案

    题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间金明自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:“你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过N元钱就行”.今 ...

  9. 【AC自动机】【动态规划】poj3691 DNA repair

    http://blog.csdn.net/kk303/article/details/6929641 http://blog.csdn.net/human_ck/article/details/657 ...

  10. 【对询问分块】【主席树】bzoj2683 简单题

    对操作序列分块,每S次暴力重建主席树. 当S=sqrt(n*log(n))时,复杂度为O(m*sqrt(n*log(n))). 在线的. #include<cstdio> #include ...