一个简单的例子看明白如何利用window.location.hash实现ajax操作时浏览器的前进/后退功能
来源:互联网 发布:ubuntu tftp-hpa配置 编辑:程序博客网 时间:2024/05/29 08:39
我们知道JavaScript中很早就提供了window.history对象,利用history对象的forward()、go()、back()方法能够方便实现不同页面之间的前进、后退等这种导航功能。但是AJAX操作,是不能用浏览器的前进和后退按钮进行导航的,因为浏览器并不会将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>
2 0
- 一个简单的例子看明白如何利用window.location.hash实现ajax操作时浏览器的前进/后退功能
- 一个简单的例子看明白如何利用window.location.hash实现ajax操作时浏览器的前进/后退功能
- JavaScript Window History 实现浏览器的 前进 后退 功能
- 一个简单的例子,看明白this
- 使用hash来实现Ajax前进后退
- 几种方法实现ajax请求内容时使用浏览器后退和前进功能
- 几种方法实现ajax请求内容时使用浏览器后退和前进功能
- 浏览器前进后退的判断
- ajax技术如何解决浏览器前进后退按键失效的问题
- 禁止浏览器的前进后退按钮功能的方法
- 关于ajax支持浏览器后退前进的做法
- ajax载入与浏览器历史的前进与后退
- 关于Ajax在浏览器中产生前进后退的实现方法
- JS实现浏览器部分自带的前进后退及刷新等功能
- JS实现浏览器部分自带的前进后退及刷新等功能
- 使用栈结构简易实现浏览器的后退与前进功能(以Android为例)
- 使用history.pushState()和popstate事件实现AJAX的前进、后退功能
- JavaScript 后退前进的操作
- 数字安全证书(CA证书)介绍
- 整型和字符串、字符串和字符数组互转
- Logger级别
- javaScript 关于闭包问题
- 用ext_skel,实现一个PHP扩展,添加到PHP并调用
- 一个简单的例子看明白如何利用window.location.hash实现ajax操作时浏览器的前进/后退功能
- Hive内置函数的应用案例
- 黑马程序员——异常
- Hibernate4与hibernate3主要区别与版本不一致导致的错误
- nginx-upstream安装配置
- Workspace in use or cannot be created, choose a different one.--错误解决办法
- Java中Void占位符的测试及个人理解
- 如何获取对hbase的请求rpc数
- 使用大恒水星相机利用OpenCV+ Zbar 解QR码在ROS下定位的实现