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 相关文章推荐
在JavaScript中实现命名空间
Nov 23 Javascript
基础的prototype.js常用函数及其用法
Mar 10 Javascript
javascript for循环设法提高性能
Feb 24 Javascript
jQuery技巧总结
Jan 01 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
原生js的数组除重复简单实例
May 24 Javascript
浅谈js的异步执行
Oct 18 Javascript
webix+springmvc session超时跳转登录页面
Oct 30 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
微信小程序实现侧边分类栏
Oct 21 Javascript
基于JavaScript实现留言板功能
Mar 16 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
PHP 中的一些经验积累
2006/10/09 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
关于js遍历表格的实例
2013/07/10 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
基于jQuery实现左右图片轮播(原理通用)
2015/12/24 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
详解在Vue中有条件地使用CSS类
2017/09/30 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
JS实现星星海特效
2019/12/24 Javascript
在Python中关于中文编码问题的处理建议
2015/04/08 Python
python实现决策树分类算法
2017/12/21 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
postman和python mock测试过程图解
2020/02/22 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
keras 如何保存最佳的训练模型
2020/05/25 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
英国手机零售商:Metrofone
2019/03/18 全球购物
在求职信中如何凸显个人优势
2013/10/30 职场文书
公务员职务工作的自我评价
2013/11/01 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
博士生求职信
2014/07/06 职场文书
交通事故委托书范本
2014/09/28 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
教师学期个人总结
2015/02/11 职场文书
成绩单家长意见
2015/06/03 职场文书
人与自然观后感
2015/06/16 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server