AJAX 网页保留浏览器前进后退等功能
更新时间：2011年02月12日 21:41:37 作者：
AJAX的应用较少了页面的刷新次数，但是也可能会使浏览器的前进、后退、刷新等功能受到影响。
在一些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)
这里假设一个有两个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)
您可能感兴趣的文章:
- 基于Jquery 解决Ajax请求的页面 浏览器后退前进功能，页面刷新功能实效问题
- Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
- AJAX 常用函数创建XMLHTTP对象，区别IE，Mozilla浏览器
- JQuery的ajax获取数据后的处理总结(html,xml,json)
- Jquery Ajax学习实例 向页面发出请求，返回XML格式数据
- AJAX使用post发送数据xml格式接受数据
- jquery $.ajax()取xml数据的小问题解决方法
- 用Ajax读取XML格式的数据
- 关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
- ajax处理服务器返回的三种数据类型方法
相关文章
这篇文章主要给大家通过讲解和实践,详细介绍了Promise对象的三种状态：pending（待定）、fullfilled（已兑现）、rejected（已拒绝）,并通过日志查看,展示了Promise状态的改变顺序,帮助读者更好的理解和应用Promise,需要的朋友可以参考下2024-10-10
大家用cnblogs,csdn博客发布技术文档的时候，可以用下面的代码实现运行功能。当然大家看了源码就会发现其实方法还有很多。有更好的方法就发布一下啊。2009-11-11
这篇文章主要介绍了javascript实现状态栏文字首尾相接循环滚动的方法,实例分析了javascript定时函数及页面元素属性操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
本篇文章主要讲述几种前端JS检测开发者工具是否打开的方法,需要的朋友可以参考下2020-10-10
这篇文章主要介绍了BootStrap 弹出层代码的相关资料,非常补充，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
这篇文章主要介绍了JavaScript实现下拉菜单的显示和隐藏的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要为大家详细介绍了微信小程序表单弹窗实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
这篇文章主要介绍了JS实现带鼠标效果的头像及文章列表代码,涉及JavaScript响应鼠标事件动态切换页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了javascript进行四舍五入方法汇总，并给出了相关示例,需要的朋友可以参考下2014-12-12
比较不错的实现代码，大家可以仔细的看下，思路。2009-01-01
最新评论