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

所属分类: 网络编程 / JavaScript 阅读数: 1148
收藏 0 赞 0 分享
在一些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 this关键字指向常用情况解析

这篇文章主要介绍了JavaScript this关键字指向常用情况解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue-cli打包后如何本地查看的操作

这篇文章主要介绍了Vue-cli打包后如何本地查看的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue cli 3.0通用打包配置代码,不分一二级目录

这篇文章主要介绍了vue cli 3.0通用打包配置代码,不分一二级目录,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JavaScript事件循环及宏任务微任务原理解析

这篇文章主要介绍了JavaScript事件循环及宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

关于vue-cli3打包代码后白屏的解决方案

这篇文章主要介绍了关于vue-cli3打包代码后白屏的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue打包静态资源后显示空白及static文件路径报错的解决

这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue-cli3访问public文件夹静态资源报错的解决方式

这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS继承实现方法及优缺点详解

这篇文章主要介绍了JS继承实现方法及优缺点详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

vue或react项目生产环境去掉console.log的操作

这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题

这篇文章主要介绍了解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多