最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:懂视网 责编:小采 时间:2020-11-27 20:58:03
文档

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

AJAX网页保留浏览器前进后退等功能_javascript技巧:在一些AJAX被大量使用的页面,有时都不太敢刷新,因为刷新以后可能看到的是和原来有很大不同的页面。暂不讨论在某些页面内容大量更新的情况下是否该使用AJAX的问题,本文简单说一下保留浏览器前进、后退、刷新等功能。 这里假设一个有两个Tabs的页面,每个T
推荐度:
导读AJAX网页保留浏览器前进后退等功能_javascript技巧:在一些AJAX被大量使用的页面,有时都不太敢刷新,因为刷新以后可能看到的是和原来有很大不同的页面。暂不讨论在某些页面内容大量更新的情况下是否该使用AJAX的问题,本文简单说一下保留浏览器前进、后退、刷新等功能。 这里假设一个有两个Tabs的页面,每个T

在一些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)

文档

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

AJAX网页保留浏览器前进后退等功能_javascript技巧:在一些AJAX被大量使用的页面,有时都不太敢刷新,因为刷新以后可能看到的是和原来有很大不同的页面。暂不讨论在某些页面内容大量更新的情况下是否该使用AJAX的问题,本文简单说一下保留浏览器前进、后退、刷新等功能。 这里假设一个有两个Tabs的页面,每个T
推荐度:
标签: 浏览器 页面 js
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top