AJAX的刷新和前进后退问题解决
2016-02-17 16:46
281 查看
使用AJAX开发分页功能的时候,用户跳转到第5页,但是刷新以后又显示第一页了,能不能刷新后还显示第5页?还有能不能用浏览器的前进后退按钮来浏览AJAX历次的变化。
因为Javascript对dom的操作是不持久化的,刷新后就恢复原状,而且也不保存历史记录,也就无法前进后退来查看历史了。但是可以采用“地址栏加hash”技术来解决。
地址栏中敲入“页面地址#aaa”就表示跳转到“页面地址 ”的“aaa”这个页内锚点(英文叫做hash)。只要改变“aaa”这个锚点内容,浏览器就认为URL变化,也就会放入浏览历史,这样前进后退问题就解决了。我们只要把不同的AJAX状态通过不同的hash写到地址栏就可以了,当页面加载的时候检测是否有hash值,有的话就读取hash进行相应的ajax还原操作。
location.hash可以取到或者设置hash的值,当hash改变的时候window.onhashchange事件会被触发,但是页面加载的时候哪怕有hash值,onhashchange事件也不会触发,因此需要在onload事件中也读取hash进行同样的处理,保证刷新页面也能恢复ajax的页面显示。
下面是例子代码,为了简单的突出问题,这里没有使用ajax,只是通过dom来修改页面状态。点击文本框,文本框的内容会加1(注意观察地址栏),刷新页面后值也还是增加后的值,而且页面可以前进后退。
代码如下:
[html] view
plain copy
print?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-1.4.1.js"></script>
<script type="text/javascript">
var processHash = function () {
var hashStr = location.hash.replace("#", "");
if (hashStr) $("#txt1").val(hashStr);
}
$(function () {
$("#txt1").click(function () {
var i = parseInt($("#txt1").val());
i++;
$("#txt1").text(i);
location.hash = "#" + i;
});
window.onload = processHash;
window.onhashchange = processHash;
});
</script>
</head>
<body>
<input type="text" id="txt1" value="1" />
</body>
</html>
原文地址:http://blog.csdn.net/resigshy/article/details/8046595
因为Javascript对dom的操作是不持久化的,刷新后就恢复原状,而且也不保存历史记录,也就无法前进后退来查看历史了。但是可以采用“地址栏加hash”技术来解决。
地址栏中敲入“页面地址#aaa”就表示跳转到“页面地址 ”的“aaa”这个页内锚点(英文叫做hash)。只要改变“aaa”这个锚点内容,浏览器就认为URL变化,也就会放入浏览历史,这样前进后退问题就解决了。我们只要把不同的AJAX状态通过不同的hash写到地址栏就可以了,当页面加载的时候检测是否有hash值,有的话就读取hash进行相应的ajax还原操作。
location.hash可以取到或者设置hash的值,当hash改变的时候window.onhashchange事件会被触发,但是页面加载的时候哪怕有hash值,onhashchange事件也不会触发,因此需要在onload事件中也读取hash进行同样的处理,保证刷新页面也能恢复ajax的页面显示。
下面是例子代码,为了简单的突出问题,这里没有使用ajax,只是通过dom来修改页面状态。点击文本框,文本框的内容会加1(注意观察地址栏),刷新页面后值也还是增加后的值,而且页面可以前进后退。
代码如下:
[html] view
plain copy
print?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-1.4.1.js"></script>
<script type="text/javascript">
var processHash = function () {
var hashStr = location.hash.replace("#", "");
if (hashStr) $("#txt1").val(hashStr);
}
$(function () {
$("#txt1").click(function () {
var i = parseInt($("#txt1").val());
i++;
$("#txt1").text(i);
location.hash = "#" + i;
});
window.onload = processHash;
window.onhashchange = processHash;
});
</script>
</head>
<body>
<input type="text" id="txt1" value="1" />
</body>
</html>
原文地址:http://blog.csdn.net/resigshy/article/details/8046595
相关文章推荐
- Android Camera开发之通过Intent拍照
- pulseaudio的交叉编译
- springMVC的一些工具类
- Android开源框架EventBus事件总线详解
- 百度地图URL调用
- Java NIO相关操作
- 深入理解TAILQ队列(转自http://blog.csdn.net/hunanchenxingyu/article/details/8648794)
- java获取服务器一些信息的方法
- Unity是怎样实现Bloom Image Effect的
- WinDBG__独立安装文件
- 腾讯张小龙
- 找质数算法(Sieve of Eratosthenes筛法)
- 正则表达式的用法和常用正则表达式大全(转)
- slf4j+log4j配置
- Xcode7如何添加pch文件
- top 命令
- Get notification texts colors and background
- 利用html5 Api 实现分页
- android滚轮式时间选择器
- 1081. Rational Sum (20)