上一篇文章中。我们使用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. [ThinkPHP] 从一个表中获得栏目对应的ID，从另一个表获得属于这些栏目的文章

    public function index(){ $cate = 1; $query = M('Cate')->field('id')->where(array('id'=>$cat ...

  2. Codeforces Round 254 (Div. 2)

    layout: post title: Codeforces Round 254 (Div. 2) author: "luowentaoaa" catalog: true tags ...

  3. VisualVM远程JVM

    Tomcat配置 进入TOMCAT_HOME/bin目录 打开catalina.sh文件,加入如下信息: JAVA_OPTS="$JAVA_OPTS -Djava.rmi.server.ho ...

  4. n2n搭建手记-2-V2

    n2n-V2搭建 [1.]在V1中遇到的问题 在完成V1搭建后,边缘节点1台机器由centos 6.5 重装为Centos 7 ,再次重加入V1时遇到 与节点其他机器 可 ping通.能通过机器的公网 ...

  5. 算法-桶排序(Bucket sort)

    本文由@呆代待殆原创,转载请注明出处. 简介:这个排序算法不属于比较排序,在平均情况下他的时间代价是O(n),并且它假设它的输入数据均匀的分布在一个固定的区间里. 思路:桶排序假设他的输入均匀的分布在 ...

  6. 详细的KVO总结,包括基本改变,使用案例,注意点.看我就够了!

    概述 KVO全称Key-Value-Observing,也叫键值监听,是一种观察者设计模式.提供了一种机制,当指定的对象的属性被修改后,对象就会收到一个通知.也就是说每次指定的被观察的对象的属性被修改 ...

  7. [Codeforces 17C] Balance

    Brief Introduction: 给定一个仅由abc组成的字符串,每个字符可以向左右延展,求最终新的平衡字符串的个数. Algorithm: 关键点在于变换前后字符串中字符的相对位置不会发生改变 ...

  8. Codeforces 785E Anton and Permutation（分块）

    [题目链接] http://codeforces.com/contest/785/problem/E [题目大意] 一个1到n顺序排列的数列,每次选择两个位置的数进行交换,求交换后的数列的逆序对数 [ ...

  9. [CF494C]Helping People

    题意:有$n$个穷人,每个穷人有$a_i$的钱,有一个富人决定做$q$次捐赠$(l_i,r_i,p_i)$,表示他有$p_i$的概率给$[l_i,r_i]$的人捐$1$的钱,捐赠的价值为捐赠后最富的人 ...

  10. Exercise03_12

    import java.util.Scanner; public class Palindrome { public static void main(String[] args){ int a; S ...