上一篇文章中。我们使用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. magento 开启模板路径提示

    1.进入后台system->configuration->,选择main Website 2.advanced->developer中,将Debug中的Template Path H ...

  2. F - 等式（1/x + 1/y = 1/n）

    链接:https://www.nowcoder.com/acm/contest/90/F来源:牛客网 题目描述 给定n,求1/x + 1/y = 1/n (x<=y)的解数.(x.y.n均为正整 ...

  3. [thinkphp]验证码不显示： 图像因存在错误无法显示

    我只想说,该死的BOM FUKKKKK!!!!!!!!

  4. pyinstaller对多进程程序的打包

    在使用python的第三方库pyinstaller对多进程程序进行打包时,程序不能正常的运行,但是后台却有多个进程一直在使用资源. 解决方法很简单,在if __name__ == '__main__' ...

  5. (转)python之并行任务的技巧

    Python的并发处理能力臭名昭著.先撇开线程以及GIL方面的问题不说,我觉得多线程问题的根源不在技术上而在于理念.大部分关于Pyhon线程和多进程的资料虽然都很不错,但却过于细节.这些资料讲的都是虎 ...

  6. 【DFS】Codeforces Round #402 (Div. 2) B. Weird Rounding

    暴搜 #include<cstdio> #include<algorithm> using namespace std; int n,K,Div=1,a[21],m,ans=1 ...

  7. Eclipse / Pycharm | 使用过程中的一些问题笔记

    最近有比较多的用到这两款工具,其中也遇到一些问题,知道了一些快捷键 快捷键什么的这里就不讲了,去网上搜搜,经常使用下,自然就熟悉了 主要记录一下我遇到的几个问题 文章目录 Pycharm出现的部分快捷 ...

  8. JavaScript对JSON数据进行排序

    var ajson= { "result":[ { "cid":1, "name":"aaa", "price ...

  9. 打算安装个Ubuntu双系统，遇到了些基本概念问题（主分区、活动分区、扩展分区、逻辑分区）

    和运维的同事聊天,了解到: 1.XP系统时代(老的硬盘分区形式和分区表),最多允许建4个“主分区”,为了解决这个限制,就有了“扩展分区”的概念: 2.在“扩展分区”上,我们就可以建很多的“逻辑分区”, ...

  10. Telnet窗口尺寸选项

    转:http://www.cnpaf.net/Class/Telnet/200408/6.html 1．命令名称和选项代码 名称=NAWS(NegotiateAboutWindowSize)协商窗口的 ...