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 新手学习常见问题解决方法
Apr 18 Javascript
jQuery插件的写法分享
Jun 12 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
Dec 08 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
socket.io实现在线群聊功能
Apr 07 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
js如何编写简单的ajax方法库
Aug 02 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 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版微信js-sdk支付接口类用法示例
2016/10/12 PHP
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
js封装的textarea操作方法集合(兼容很好)
2010/11/16 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
Python psutil模块简单使用实例
2015/04/28 Python
Python lxml模块安装教程
2015/06/02 Python
Python基于Tkinter实现的记事本实例
2015/06/17 Python
python 中的int()函数怎么用
2017/10/17 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
python中append实例用法总结
2019/07/30 Python
opencv python如何实现图像二值化
2020/02/03 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
阳光体育活动方案
2014/02/16 职场文书
安全教育感言
2014/03/04 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
运动会三级跳加油稿
2015/07/21 职场文书
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python
Python实现为PDF去除水印的示例代码
2022/04/03 Python