【转】实现AJAX下的浏览器前进按钮/后退按钮，详解

时间：2010-08-23 来源：chyingp

本文转自：http://hi.baidu.com/my534/blog/item/45c6bdcadf628a82c81768e3.html

文件下载下载本文所用例子

        在AJAX技术如此火爆的今天，关于AJAX的程序破坏浏览器的“前进/后退”的问题一直像只苍蝇一样困扰着许多AJAX的初学者，当你去百度或是 google中搜索相关信息的时候，你会发现讨论此问题的文章很多，但是大多都是只给了个解决思路，或是长篇大论的深刻研究，很难找到实际的相关解决方案的例子，于是我有了写这篇文章的想法，并提供一个小例子下载，希望对喜欢AJAX技术的同仁们有所帮助！
        我们要解决AJAX程序中的浏览器的“前进/后退”问题其实在根本上是要解决如何让浏览器记录每次客户端事件的执行结果，在AJAX的技术没有像现在大红大紫的时候，也没有人去讨论如何让浏览器记录像javascript这样的客户端脚本每次的执行结果，也正是由于AJAX 的兴起，让javascript这样的客户端脚本语言如今承担着前所未有的重要角色，也吸引了更多的技术人员去研究它，呵呵，有点儿跑题了。再次重复一下儿，AJAX程序中的浏览器的“前进/后退”问题其实在根本上是要解决如何让浏览器记录每次客户端事件的执行结果，因为之前你用AJAX的方式得到的结果，你最终还是需要将这个结果用纯粹客户端的方式更新到页面中，你想让浏览器记录在案的其实也就是你最后的将结果更新到页面中的这一步，至于这前到底发生了什么，结果是否是AJAX的方式得来的这些问题对于我们来说都没有任何意义。
        目前实现此功能的方法大至上有两种比较流行的做法，一种是我们今天要讲到的利用页面中的一个隐藏的iframe去实现，另一种则是利用URL中动态的改变其中的参数让浏览器记录在案，由于各种浏览器对于URL的改变记录的程度不同，个人感觉不如第一种方式方便，暂不介绍。
        好了，开始真正的步入正题吧，我们现在要实现一个能让浏览器记住我们每一次客户端事件执行结果的例子，通过之前的分析，相信大家容易能将此例子应用于AJAX程序中。
        先看一下儿程序运行后的结果！

上一篇文章的例子中我们看到了每次点击按纽后数字的变化都被浏览器准确记录，并点击浏览器上的“前进/后退”按纽可查看之前每次点击后的数字。本篇文章将向大家详细说明实现的原理。
首先大家要明白的一点的浏览器的“前进/后退”的功能不是“死板”的只会改变当前页的URL，在页面中有iframe存在时，iframe地址的改变也会被浏览器非常人性化的记录在案，在我们对于iframe的地址动态的改变后，点击浏览器上的“前进/后退”按纽时会非常人性化的保持父页面不动的情况下改变iframe的浏览历史！这就是我们实现记录客户端操作结果的关键所在。上一篇文章中展现的例子，我们在页面中加入了一个隐藏的iframe，在点击按纽让数字加一的同时，将当前页面的内容存于一个数组中并有规律的改变了iframe中链接地址中的参数，让浏览器记录下了iframe链接地址即 URL的变化，这样就完成记录操作历史的过程。当用户点击了浏览器上的“前进/后退”功能按纽时，父页面不发生化，但会改变iframe的URL，在 iframe所链接的页面中，每次重新读取页面都会导致运行一段javascript程序，程序的功能根据当前URL中的参数去调用父页面的一个用于记取历史的方法，方法的功能就是根据iframe中传递过来的参数去返回用来记录页面信息的数组中相应的历史页面信息。这种程序实现的大致思路。
下面详细解释一下儿代码：
父页面中主要javascript代码：

程序代码 <script>
var h_list=new Array(10);//声明用来存储页面历史信息的数组（最大记录10次历史操作）
var h_index=0;//声明用来指定当前浏览历史记录的指针
//保存历史记录方法
function saveHistory()
{
    if(document.getElementById('hisStoryFrame'))
    {
if(h_index==9)
{
   h_index=0;
}else{
   h_index++;
}
h_list[h_index]=document.getElementById("info").innerHTML;
document.getElementById('hisStoryFrame').src='history.htm?'+h_index;
}
}
//读取历史记录的方法
function getHisStory(curIndex)
{
if(curIndex!=h_index)
{
if(h_list[curIndex])
{
       h_index=curIndex;
       document.getElementById("info").innerHTML=h_list[curIndex];
    }
}
}
//按纽点击后运行的方法，
function test()
{
　//用于改变页面信息，你可将其换为ajax的操作
    document.getElementById('info').innerHTML=(parseInt(document.getElementById('info').innerHTML)+1);

    //之前的操作成功后记录历史
    saveHistory();
}
</script>

以上就是在实现“前进/后退”功能主要用到的方法。
当然，不要忘了在父页面的还要在底部加入以下一段程序

程序代码 <script>
h_list[0]=document.getElementById("info").innerHTML;
</script>
此段程序的意思是将页面刚打开时页面的信息存入数组中的第０处，这样子就能保证在用户第一次点击后就能按“后退”按纽回到页面第一次打开的状态。
页面隐藏的iframe在父页面中要如下声明：
程序代码 <iframe id="hisStoryFrame" src="history.htm?0" height="0px" frameborder="no"></iframe>
height="0px" frameborder="no"　这两个属性保证了iframe在页面中不可见，而src的属性设为"history.htm?0"，注意"?0"将页面初始参数便定为0,这样子在根据"?"后的参数读取历史时就能读取到最初页面打开时的状态。
iframe指向的页面history.htm中的代码则很简单：
程序代码 <script>
var url=window.location.href;
if(url.indexOf('?')>-1)
{
parent.getHisStory(url.substr(url.indexOf('?')+1));
document.write(window.location.search.substr(1));
}
</script>

只是每次读取页面时根据URL中的"?"后的数字去调用父页面中的getHisStory方法，恢复在数组中相应的历史页面信息。

　　　这就是实现整个功能的全过程及代码，讲得比较粗糙，但代码还是很实用的，我的blog系统(http://www.zj-blog.com/)大量采用的AJAX的方式读取信息，但还是可以使用浏览器的“前进/后退”功能，其背后的原理也就是这个例子中的代码，大家如果看文章不是太明白的话可以下载本文使用的例子去研究。希望大家以后做的AJAX程序都能实现浏览器的“前进/后退”功能！

文件下载

【转】实现AJAX下的浏览器 前进按钮/后退按钮，详解

【转】实现AJAX下的浏览器前进按钮/后退按钮，详解