使用hash来实现Ajax前进后退
来源:互联网 发布:crc循环冗余校验码算法 编辑:程序博客网 时间:2024/05/16 06:08
Ajax应用中容易导致浏览器的前进后退按钮失效,不产生前进后退功能,在本文中断桥残雪就通过改变location.hash值来解决Ajax过程中导致的浏览器前进后退按键失效的问题,此方法兼容IE6+,Firefox,chrome,Safari,Opera等浏览器。
在去年断桥残雪已经写了一篇使用iframe来解决Ajax前进后退的方法,也提到了通过改变hash的方法来解决这个问题,这也是比较方便的方法,而使用iframe实现Ajax前进后退可以在不改变浏览器地址栏地址的前提下通过iframe地址的变化来“欺骗”浏览器产生前进后退,hash的方法则是直接改变浏览器地址栏地址,从而使浏览器产生前进后退。
hash导致浏览器产生前进后退原理
浏览器URL的hash值,指的是URL地址之后的#hash部分,我们可以通过JavaScript的location对象的location.hash方法来获得或者改变,但是IE中,不能设置,好像是IE中只能通过连接来实现hash的改变,不过我们可以通过jQuery插件hashchange中的$.locationHash函数来解决这个问题。
比如一个页面的地址是:http://js8.in/#top,那么这个页面的location.hash=”#top”,如果要改变这个地址的hash,可以给location.hash赋值,如:location.hash=”#home”,在IE下可以使用hashchange函数中$.locationHash(hash)给hash赋值。在日常我们常见的使用hash应用中,hash值使用最多的方式是 “返回顶部” 功能。
当hash值改变的时候,浏览器地址也就发生了相应的变化,这样浏览器就会以为地址发生了变化,从而产生前进后退按钮的变化,在这时我们可以通过浏览器后退按钮,把URL“后退”为之前的URL(只是#后的hash变化而已)。我们可以通过浏览器的这一个特点来解决Ajax应用中导致的前进后退失效问题。
使用hash变化来解决Ajax导致浏览器前进后退按钮失效
在这里断桥残雪使用jQuery以及jQuery的hashchange插件来写一个hash变化来解决上述问题。当我们引入jQuery1.4以及hashchange插件之后,我们就可以给window绑定一个hashchange事件,用来监控浏览器的hash是否发生了变化,也就是用户是否点击了浏览器的前进后退按钮,当用户点击前进或者后退之后,除非doHash函数来根据hash处理Ajax请求。具体js代码如下:
function setHash(a){$.browser.msie?$.locationHash(a):location.hash=a;}$(window).hashchange(function(){doHash();});function doHash(){var h = location.hash; switch (h) { case "#ajax1": ajaxFn1(); break; case "#ajax2": ajaxFn2(); break; default: $("#ajax").html("哈哈,hash没有啦!"); }}function ajaxFn1(){$("#ajax").load("hi.txt", function(){setHash("#ajax1");});}function ajaxFn2(){$.get("hi.html", function(t){$("#ajax").html(t);setHash("#ajax2");});}
断桥残雪简单的做了一个demo演示,大家可以点击查看一下:
使用hash来实现Ajax前进后退demo演示
另外一种解决Ajax前进后退按钮失效问题的方法,请查看文章:《关于Ajax在浏览器中产生前进后退的实现方法》
- 使用hash来实现Ajax前进后退
- 一个简单的例子看明白如何利用window.location.hash实现ajax操作时浏览器的前进/后退功能
- 一个简单的例子看明白如何利用window.location.hash实现ajax操作时浏览器的前进/后退功能
- 使用history.pushState()和popstate事件实现AJAX的前进、后退功能
- 几种方法实现ajax请求内容时使用浏览器后退和前进功能
- 几种方法实现ajax请求内容时使用浏览器后退和前进功能
- html5新特性:利用history的pushState等方法来解决使用ajax导致页面后退和前进的问题
- AJAX 前进后退刷新问题
- C#使用双链表来实现模拟IE前进后退功能
- JavaScript实现页面前进后退
- jQuery实现图片前进后退
- 前进后退视图的实现
- 前进,返回,后退功能实现
- 使用ajax和history.pushState无刷新改变页面URL(ajax中前进后退)
- AJAX 前进后退 (RSH--Really Simple History)
- AJAX的刷新和前进后退问题解决
- AJAX的刷新和前进后退问题解决
- AJAX的刷新和前进后退问题解决
- jquery事件对象属性
- 字符设备驱动程序框架
- 在Xcode中管理你的工作流程
- Linux/UNIX命令dd简介
- javascript 的定时器
- 使用hash来实现Ajax前进后退
- 出现找不到mfc90d.dll的解决办法
- 语言
- Qt下的OpenGL 编程(1)Qt下的OpenGL编程必须步骤
- 【开发工具】用Virtual Box安装Fedora,与主机共享文件夹。
- 黑马程序员——JAVA(IO 2)
- 端口概念
- HDU 1010 - Tempter of the Bone
- Maven settings