随着ajax的“大爆炸”,跟web带来了活力,但也带来了一下新的问题,比如下面将要讨论的“浏览器前进后退”的问题,由于局部刷新,url不变,浏览器感知不到“变化”,无法使用前进后退按钮。
解决问题之前
浏览器是如何记录访问历史并实现前进与后退的?
通常我们看到的浏览器地址栏URL的变化会被浏览器记录下来,还有页面中iframe子页面的地址变化也也会被浏览器记录,
浏览器将访问记录保存起来,以便进行前进和后退。
例如在http://www.google.com.hk后跟上不同的参数(或者不同的锚点),浏览器将会一一记录下来。
开始解决问题
知道了浏览器是如何记录访问历史的(URL的变化),那就可以解决ajax带来的不能前进后退的问题了,思路有二:
1.通过隐藏的iframe记录浏览历史来实现
实现思路:
在主页面中嵌入iframe,在每次触发ajax的请求的时候,将ajax请求的地址传递给iframe的子页面,此时浏览器将会
记录下iframe子页面地址的变化,当触发浏览器的前进后退按钮时,iframe的子页面地址会变化,此时iframe的子页
面中的js将会调用主页面中的相应js方法来调用对应的ajax请求。
2.通过URL中锚点或者参数的变化来实现
gmail、twitter和pip.io均使用这种方式来解决ajax前进后退的问题
有一定经验的开发者都有过对于ajax前进后退历史控制的经历,也涌现了不少的框架,不过发现这些框架对于设置了document.domain的会抱拒绝访问,其原因是因为动态创建的iframe没有设置document.domain,所以不灵了。
但这不是我要说的,我要说的是,当用户直接修改地址栏的hash并敲击回车后,这时候你就会发现历史控制失灵了。
大家要弄清楚,对于页面中有iframe的情况,iframe地址的变化(注意,通过window.location.href = hash;)会被浏览器记录在案,如果每次都是变化的iframe的地址,那前进后退都会改变iframe的地址,而不影响主页面。所以对于手动改动了地址栏的hash,改动的是主页面的hash,但不是href,所以需要同步到iframe中的href去,这样才可以在维系历史控制。
具体代码就不详细列出了,大家注意到这点就行了。
- 大小: 22.3 KB
分享到:
相关推荐
原文 http://blog.csdn.net/cyzshenzhen/article/details/30222357
通过JS实现AJAX的网站也可以前进和后退,并且效果比浏览器自身的前进后退更牛逼。
dhtmlHistory.js在Firefox下应用是没有问题的,但在ie下会有问题,主要原因是它不能脱离一个服务器环境,需要布置到一个真实的服务器下才能使用: 把 dhtmlHistory.js beat.html blank.html三个文件放到 C:\Program ...
本文主要给大家介绍基于Jquery.history解决ajax的前进后退问题,涉及到jquery前进后退相关方面的知识,本文内容经典,非常具有参考价值,特此把jquery前进后退相关知识分享在脚本之家网站供大家参考
“结合Ajax进行PHP开发”...这个堆栈以Web浏览器中的历史记录工具为蓝本,为该应用程序提供后退、前进和刷新按钮。在为应用程序建立历史堆栈的过程中,我们将依靠客户端技术,并将其直接与第1部分的代码结合在一起。
主要介绍了pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新的相关资料,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
NULL 博文链接:https://justcoding.iteye.com/blog/1065618
暂不讨论在某些页面内容大量更新的情况下是否该使用AJAX的问题,本文简单说一下保留浏览器前进、后退、刷新等功能。 这里假设一个有两个Tabs的页面,每个Tab中含有大量文字,可能还有图片。如果现在觉得Tab2的内容很...
NULL 博文链接:https://mojianpo.iteye.com/blog/988411
在做 ajax load 的时候,很多人都不会考虑到需要浏览器支持前进后退功能,本例让浏览器支持jquery ajax load 前进、后退 功能,需要的朋友可以参考下
在我们浏览不同网页的时候,我们可以通过浏览器的前进、后退键来去到我们前后访问过的页面。这篇文章主要介绍了让浏览器记住ajax请求并能前进和后退方法(一),需要的朋友可以参考下
ajax无刷新页面切换,历史记录后退前进解决方案.docx
下面小编就为大家带来一篇通过history解决ajax不支持前进/后退/刷新的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
解决ajax不能前进后退的问题
需要使用的 jquery.history.js插件 在巨人的肩膀之上,以下前进后退工作基于插件完成! 做了几个兼职,上天帮人完成页面的时候顺便做了一个ajax的请求。发现浏览器的刷新,后退,前进按钮失效。于是乎google了一下。...