AJAX 网页保留浏览器前进后退等功能


Posted in Javascript onFebruary 12, 2011

在一些AJAX被大量使用的页面,有时都不太敢刷新,因为刷新以后可能看到的是和原来有很大不同的页面。暂不讨论在某些页面内容大量更新的情况下是否该使用AJAX的问题,本文简单说一下保留浏览器前进、后退、刷新等功能。
这里假设一个有两个Tabs的页面,每个Tab中含有大量文字,可能还有图片。如果现在觉得Tab2的内容很好,把它加入收藏夹或发送给朋友。下次通过收藏夹打开或者朋友点开这个链接的时候很有可能看到的是Tab1的内容,然后需要鼠标再次点击Tab2才看到想要看的内容。如果页面逻辑更为复杂,则可能要进行多步操作才能回到希望看的内容,这样的体验不太好。
要使刷新、加入收藏夹等功能正常使用,需要让当前的操作在URI上有所体现。但是改变URI的同时又不能引起页面的刷新,因此可以通过改变URI中的片段(fragment)来实现。例如,点击Tab1后将URI改为http://www.example.com/example.html#tab1,点击Tab2则将URI改为http://www.example.com/example.html#tab2。

function ShowTab1() { 
$("#tab2").hide(); 
$("#tab1").show(); 
window.location.hash = "#tab1"; 
}; 
function ShowTab2() { 
$("#tab1").hide(); 
$("#tab2").show(); 
window.location.hash = "#tab2"; 
};

这样做已经使得URI产生了变化,但是无论通过http://www.example.com/example.html#tab1还是http://www.example.com/example.html#tab2访问页面都是显示Tab1的内容,所以还需要在页面载入时读取#后的内容。
$(document).ready(ShowTab()); 
function ShowTab() { 
if (window.location.hash == "#tab2") 
ShowTab2(); 
else 
ShowTab1(); 
}

这样,刷新和加入收藏夹等功能都已经可以使用了,不过前进和后退还是会有麻烦。虽然这两个按钮已经变得可用,但是点击时网页的内容并没有发生变化。我们需要用到body的onhashchange事件。onhashchange事件并不是所有浏览器都支持的,如果要使不支持该事件的浏览器也检测#后内容的变化,可能需要写一个函数定期检测window.location.hash的变化或者自己实现onhashchange事件。
示例代码打包下载 (Visual Studio 2010)
Javascript 相关文章推荐
jQuery 中关于CSS操作部分使用说明
Jun 10 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
解析js原生方法创建表格效率测试
Jul 08 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
jquery遍历table的tr获取td的值实现方法
May 19 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
使用OPENLAYERS3实现点选的方法
Sep 24 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 Javascript
一些主流JS框架中DOMReady事件的实现小结
Feb 12 #Javascript
javascript中删除指定数组中指定的元素的代码
Feb 12 #Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 #Javascript
编写可维护面向对象的JavaScript代码[翻译]
Feb 12 #Javascript
URL地址中的#符号使用说明
Feb 12 #Javascript
基于Jquery制作的幻灯片图集效果打包下载
Feb 12 #Javascript
基于jquery的jqDnR拖拽溢出的修改
Feb 12 #Javascript
You might like
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
二进制交叉权限微型php类分享
2014/02/07 PHP
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
javascript入门教程基础篇
2015/11/16 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
老生常谈javascript中逻辑运算符&&和||的返回值问题
2017/04/13 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
浅析NumPy 切片和索引
2020/09/02 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
工程部经理岗位职责
2013/12/08 职场文书
办公室文书岗位职责
2013/12/16 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python
Python采集股票数据并制作可视化柱状图
2022/04/04 Python