AJAX的刷新和前进后退问题解决
来源:互联网 发布:中国版bpa软件 编辑:程序博客网 时间:2024/06/11 17:12
具体请点击:http://www.verydemo.com/demo_c107_i17665.html
使用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(注意观察地址栏),刷新页面后值也还是增加后的值,而且页面可以前进后退。
代码如下:
因为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(注意观察地址栏),刷新页面后值也还是增加后的值,而且页面可以前进后退。
代码如下:
<!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>
0 0
- AJAX的刷新和前进后退问题解决
- AJAX的刷新和前进后退问题解决
- AJAX的刷新和前进后退问题解决
- AJAX的刷新和前进后退问题解决
- AJAX 前进后退刷新问题
- 【JS】:JS实现页面的刷新,后退和前进
- 使用ajax和history.pushState无刷新改变页面URL(ajax中前进后退)
- frame框架页面的 前进,后退,刷新
- Android WebView的前进、后退、与刷新
- 实现页面的后退、刷新、前进
- Android WebView的前进、后退、与刷新
- Android WebView的前进、后退、与刷新
- Android WebView的前进、后退、与刷新
- Android WebView的前进、后退、与刷新
- 解决UIWebView 前进、后退刷新的坑
- Android WebView的前进、后退、与刷新
- jsp页面的前进刷新后退
- jsp页面的前进刷新后退
- C++习题 对象转换
- Java中的Properties类
- insmod 和modprobe的区别
- Linux 下编译、安装、配置 QT
- 倪光南:政府不宜采购Win8 国产软件筹划接管XP用户
- AJAX的刷新和前进后退问题解决
- js,正则表达式
- In-app purchase [Environment: Sandbox] bug
- Google Datastore 学习记录
- hadoop学习;hdfs操作;运行抛出权限异常: Permission denied;api查看源码方法;源码不停的向里循环;抽象类通过debug查找源码
- unix网络编程的一个多进程的例子
- Lucene:基于Java的全文检索引擎简介
- Android中WebView开发汇总
- Vs2008界面环境重置