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 相关文章推荐
鼠标经过的文本框textbox变色
May 21 Javascript
基于jquery的分页控件(C#)
Jan 06 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
javascript插入样式实现代码
Feb 22 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
javascript删除数组元素并且数组长度减小的简单实例
Feb 14 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 Javascript
Vue中插入HTML代码的方法
Sep 21 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 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
BBS(php & mysql)完整版(五)
2006/10/09 PHP
php中的实现trim函数代码
2007/03/19 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
js实现多个标题吸顶效果
2020/01/08 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
Python有序字典简单实现方法示例
2017/09/28 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
python tkinter canvas使用实例
2019/11/04 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
电厂厂长岗位职责
2014/01/02 职场文书
幼师自我鉴定
2014/02/01 职场文书
银行开业庆典方案
2014/02/06 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
就业导师推荐信范文
2015/03/27 职场文书
公司职员入党自传书
2015/06/26 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题
Python sklearn分类决策树方法详解
2022/09/23 Python