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

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。

代码

1 function ShowTab1() {
2     $("#tab2").hide();
3     $("#tab1").show();
4     window.location.hash = "#tab1";
5 };
6 function ShowTab2() {
7     $("#tab1").hide();
8     $("#tab2").show();
9     window.location.hash = "#tab2";
10 };

这样做已经使得URI产生了变化，但是无论通过http://www.example.com/example.html#tab1还是http://www.example.com/example.html#tab2访问页面都是显示Tab1的内容，所以还需要在页面载入时读取#后的内容。

1 $(document).ready(ShowTab());
2 function ShowTab() {
3     if (window.location.hash == "#tab2")
4         ShowTab2();
5     else
6         ShowTab1();
7
8 }

这样，刷新和加入收藏夹等功能都已经可以使用了，不过前进和后退还是会有麻烦。虽然这两个按钮已经变得可用，但是点击时网页的内容并没有发生变化。我们需要用到body的onhashchange事件。onhashchange事件并不是所有浏览器都支持的，如果要使不支持该事件的浏览器也检测#后内容的变化，可能需要写一个函数定期检测window.location.hash的变化或者自己实现onhashchange事件。

示例下载 (Visual Studio 2010)

转载于:https://www.cnblogs.com/snowdream/archive/2011/02/12/back-and-forward-support-for-ajax.html

AJAX 网页保留浏览器前进后退等功能相关推荐

标准的网页浏览器都提供一个功能：保留最近浏览过页面的历史记录。通过后退或向前按钮就能在历史记录之间跳转。现在，请你模拟这个功能，接收如下三条指令:1. BACK：回退功能，即回退到上一个访问的
标准的网页浏览器都提供一个功能:保留最近浏览过页面的历史记录.通过后退或向前按钮就能在历史记录之间跳转. 现在,请你模拟这个功能,接收如下三条指令: 1. BACK:回退功能,即回退到上一个访问的页面 ...
ajax实现浏览器前进后退-location.hash与模拟iframe
为什么80%的码农都做不了架构师?>>> Aajx实现无数据刷新时,我们会遇到浏览器前进后退失效的问题以及URL不友好的问题. 实现方式有两种 1.支持onhashchange ...
[html]history禁用浏览器的后退功能（包括其他操作后退的按钮，操作等）
前端在编写代码的时候可能会使用到禁用浏览器的后退功能,为使后退功能更加的完善,所以需要禁用掉很多的其他操作,比如键盘的按钮,组合快捷键等等. 这里是一段关于js完全禁用浏览器后退的功能. <sc ...
6612345免费网页打印浏览器本软件完全免费，这是一个集网页打印、读取身份证、拍照、读取串口等功能为一体的超级浏览器。
6612345免费网页打印浏览器本软件完全免费,这是一个集网页打印.读取身份证.拍照.读取串口等功能为一体的超级浏览器. 支持如下功能特点: 1. 支持网页静默打印,只要一句js即可: 2. 拖拽即 ...
vue 禁止显示本网页由、、_【VUE/JS】vue和js禁止浏览器页面后退
1.vue 禁止浏览器后退需求是:需要某个路由不能通过浏览器返回,同时不影响相互之间的切换整理一下解决方法和使用方法: 1.在路由配置中给这个路由添加meta信息,比如: { path: '/ ...
php让手机浏览器记住密码,php 利用cookie实现网页记住用户名和密码的功能
这篇文章介绍的内容是关于php 利用cookie实现网页记住用户名和密码的功能,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 1.html部分记住账号密码记住用户名和密码用户 ...
数据结构--栈--浏览器前进后退应用
浏览器前进后退: 当你依次浏览a,b,c,然后回到b,再浏览d,就只能查看a,b,d,了. 原理: 利用两个栈A,B 浏览新网页的时候,压入栈A,清空栈B 前进,栈A获取栈B的栈顶元素,栈B弹栈,并压 ...
抓取AJAX网页的方法－Firefox组件，C#集成
现在AJAX的使用越来越广泛了,但是如果经常写网页抓取程序的人会发现,很多网页内容是通用AJAX进行加载的,实际抓取到的内容寥寥无几. 通过网络到处查找方法,发现用firefox浏览器能够正常把AJA ...
ajax预加载html seo,AJAX网页如何实现SEO友好
在WEB网页上应用AJAX技术可以提高用户体验,但是对于SEO却不够友好,因为搜索引擎不会执行JS,而AJAX网页的内容都是动态生成(即网页展示的内容都是在浏览器端通过JS动态生成的).既要保留AJA ...

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

AJAX 网页保留浏览器前进后退等功能相关推荐

最新文章

热门文章