浏览AJAX历史记录的三种方法

By19.Published on五月 6, 2009 13:04. 219 Views .
很差差一般好非常好 (1 次评分, 平均: 5.00 out of 5)
Loading ... Loading ...

浏览AJAX历史记录的三种方法：jQuery插件+隐藏iframe+hash（锚点）参数

以前觉得AJAX更新后想激活浏览器的“前进~后退”按钮再浏览历史记录应该不好实现，所以一直没关注这方面的东西，前几天一哥们问起才想把这块搞搞，其实代码很简单，主要是实现思路，这里提供的例子里用了三种实现方法。

jQuery插件+隐藏iframe+hash（锚点）参数三种浏览AJAX历史记录实例下载

NEW~再提供一个例子，结合了锚点、iframe等方法，在各种浏览器下测试通过。

新提供的例子中预留了nowHashHaveChange函数做每次用户点击前进后退后进行其他操作的扩展：

1
2
3

function nowHashHaveChange() {
	// alert("nowHashHaveChange");
}

对于我的站点一开始的读取锚点内容，需要你每次页面加载成功之后判断有无锚点，有的话就读取锚对应的内容，这部分需求不同进行的操作也不同需要自己根据自己站点的情况做修改，故不提供这部分相关内容。

以下是使用iframe方式具体思路，这是我找到的第一种实现思路：（以下一段照抄网络搜索内容 – 。-）

iframe内容改变可以激活控制栏的前进后退按钮，用户点击了浏览器上的“前进/后退”功能按纽时，父页面不发生化，但会改变iframe的URL，在iframe所链接的页面中，每次重新读取页面都会导致运行一段javascript程序，程序的功能根据当前URL中的参数去调用父页面的一个用于记取历史的方法，方法的功能就是根据iframe中传递过来的参数去返回用来记录页面信息的数组中相应的历史页面信息。

具体代码，首先页面中要有一个iframe：

1

<iframe id="ajax_history_iframe" height="0px" frameborder="no" scrolling="no" src="ajaxhistory.php?historyID=0"></iframe>

之后建立一个队列用来存储每次AJAX更新的内容，比如我每次都要更新：

1

<div id="for_ajax_history"></div>

这个DIV中的内容，则写一段JS先把第一次页面打开的内容存储进去：

1
2
3
4
5

var ajax_list = new Array();
window.onload = function() {
//第一次打开需要以后用AJAX更新的内容先存入ajax_list中
ajax_list.push(document.getElementById("for_ajax_history").innerHTML);
}

之后我们执行AJAX，得到需要更新的数据，先不要去替换页面的内容，先把这部分数据存储到ajax_list中：

1
2

//ajax_callback就类似于AJAX成功后得到的数据内容 先存入array中
ajax_list.push(ajax_callback);

然后更改iframe的地址：

1

document.getElementById('ajax_history_iframe').src="ajaxhistory.php?historyID="+(ajax_list.length-1);

iframe访问ajaxhistory.php，ajaxhistory.php具体只有几句代码：

1
2
3
4

<?php $historyID=$_GET["historyID"];?>
<script type="text/javascript">
   parent.ajax_gethistory(<?php echo $historyID; ?>);
</script>

就是调用父页面ajax_gethistory函数：

1
2
3
4
5
6
7
8
9

//判断是否是第一次 第一次访问iframe回调不执行ajax_gethistory 可以防止很多异常错误发生
var ifFirst = true;
 
function ajax_gethistory(id) {
	if (!ifFirst && ajax_list[id] != null) {
		document.getElementById("for_ajax_history").innerHTML = ajax_list[id];
	}
	ifFirst = false;
}

意思就是说把刚刚AJAX得到的并且存入队列内容付给应该更新的这个for_ajax_history的DIV，PHP文件相当简单，就是根据传过来的ID输出这段JS，你可以随意改变成其他类型的文件（例如html或java）。

此时就完成了AJAX的更新，并且激活了导航栏的“前进后退”，之后你再点击前进后退就会改变iframe从而每次都调用父页面的ajax_gethistory来浏览历史内容。

只是ARRAY添加的越多是否会对客户端的性能造成影响？（也许只是感觉是这样而已，毕竟就算你打开一百个页面的内容也到不了几兆），iframe的方法在GOOGLE和APPALE的浏览器下会有问题，iframe不会激活GOOGLE和APPALE的前进后退按钮，所以有了以下的锚点法。

锚点法是根据浏览器的锚点(hash)改变，加载数据。用设置监听的方法来判断每次前进后退按钮的事件，相应的内容看实例吧。

各种浏览器的改变锚点、改变iframe对导航栏前进后退的操作不尽相同，判断起来很纠结，如果你要自己写一个比较完善的代码，建议把锚点法和iframe整合在一起使用（可以参考我上面新提供的那个例子，整合了锚点和iframe方法的历史记录浏览）。

至于如果你用JQUERY，很好~有相关插件可用，具体使用请看例子。

本文来自： http://www.ll19.com/for_ajax_history.html

{ Tags: }
«
»
这篇文章发布于 2009年05月6日，星期三，1:04 下午，归类于 Collect。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。

63 Responses to “ 浏览AJAX历史记录的三种方法 ”

  1. 长岛冰泪 长岛冰泪 说： ( Has commented 10 times in LL19.com )
    九月 19, 2010 18:50 于 6:50 下午

    用 jQuery.historyLoad那个插件。如何能判断加载完成？

    回复 |  回复并邮件
    • 19. 19. 说： ( Admin commented )
      九月 19, 2010 19:13 于 7:13 下午

      JQUERY有AJAX加载完毕回调的函数可调用，这块你不知道就别说你用过JQUERY，好好看看文档吧。

      @长岛冰泪:

      回复 |  回复并邮件
  2. MCOOO MCOOO 说： ( Has commented 45 times in LL19.com )
    六月 29, 2010 13:29 于 1:29 下午

    哈哈！又换回以前的头像了，不错这个有型啊！这才像19嘛，

    回复 |  回复并邮件
  3. MCOOO MCOOO 说： ( Has commented 45 times in LL19.com )
    六月 29, 2010 13:20 于 1:20 下午

    @19.:你说的对，受教，我太急躁了，自己能力有限，而且全站ajax问题可真多，当然我万不得意不会麻烦你的，flash的问题我主题上线再说吧！这样我说的才会更明白！

    回复 |  回复并邮件
  4. MCOOO MCOOO 说： ( Has commented 45 times in LL19.com )
    六月 29, 2010 12:52 于 12:52 下午

    @19.:感谢博主的耐心和热情的帮助，其实我问的问题每次都不一样的，之前我不是用你的js实现ajax,现在才用你的js啊，问题即使相同但解决方法不一样，很抱歉可能是我没有说明白，不如过两天我启用主题时，再请教你吧！这样可以看到我所说的问题了！

    回复 |  回复并邮件
  5. MCOOO MCOOO 说： ( Has commented 45 times in LL19.com )
    六月 28, 2010 10:32 于 10:32 上午

    @19.:博主我想请教下，如何让FLASH输出的连接也可实现AJAX,即是改变某个设置好的锚点就会加载内容！

    回复 |  回复并邮件
    • 19. 19. 说： ( Admin commented )
      六月 28, 2010 12:30 于 12:30 下午

      FLASH直接调用JS就行了，和你点链接一样。

      @MCOOO:

      回复 |  回复并邮件
      • mcooo mcooo 说： ( Has commented 40 times in LL19.com )
        六月 28, 2010 19:03 于 7:03 下午

        @19.:结合你的JS又如何调用啊！

        回复 |  回复并邮件
        • 19. 19. 说： ( Admin commented )
          六月 29, 2010 12:10 于 12:10 下午

          你AJAX操作其实就是点击链接执行JS，FLASH点击之后也是调用JS，你以前怎么结合的JS现在就怎么结合，怎么又说到调用我的JS？你不是已经实现了全AJAX了吗，你以前怎么实现的FLASH就怎么用。

          你一个问题总是来来回回的问。而且别人的耐心和时间也是有限的。

          @mcooo:

          回复 |  回复并邮件
          • mcooo mcooo 说： ( Has commented 40 times in LL19.com )
            七月 3, 2010 1:40 于 1:40 上午

            @19.:主题现在终于上线了，我所说的FLASH输出的连接就是像这样的，麻烦TX有空看下！

            回复 |  回复并邮件
            • 19. 19. 说： ( Admin commented )
              七月 4, 2010 17:25 于 5:25 下午

              你还是没搞清楚原理吗，你现在全站已经AJAX化了，你在点击链接的时候不是执行打开链接的操作了，是执行的ajax_19的相关内容，就是执行的JS函数。

              你现在想点击FLASH也执行AJAX，就不能用FLASH执行打开链接的操作了，而是直接调用JS函数啊。点击FLASH直接执行ajax_19的相关内容，比如在FLASH先获取好相关参数，点击FLASH的时候执行：

              1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

              function flashCall(_href, _title, hash, mao) {
	var option = {
		url : _href,
		data : "ajax=yes",
		dataType : "html",
		type : "post",
		success : function(content) {
			if (site == "blogReadMore") {
				y = (y == "" || y == null) ? (-(mouse.mousePos.y)) + 30 : y;
				// alert (y);
				ajax_main_19.set_19_Ajax(content, _title, _href, hash, mao, "",
						y);
			} else {
				ajax_main_19.set_19_Ajax(content, _title, _href, hash, mao,
						divID);
				if (site == "i") {
				} else if (site == "bb") {
				}
			}
		},
		error : function() {
			if (site == "blogReadMore") {
				jQuery(_target)
						.html("\u52a0\u8f7d\u9519\u8bef\uff0c\u8bf7\u91cd\u8bd5\u3002");
				closeLoading();
			} else {
				ajax_main_19.set_19_Ajax("<h2>AJAX Error...</h2><p><a href=\""
								+ _href + "\">" + _href + "</a></p>",
						"Ajax error", _href, hash + "/error", "", divID);
				if (site == "i") {
				} else if (site == "bb") {
				}
			}
		}
	};
	ajax_main_19.showFloatBoxBg();
	if (site != "blogReadMore") {
		// ajax_main_19.jquerymove("", "fast");
		ajax_main_19.showAjaxTooltips(_href);
	}
	ajax_main_19.commonly_ajax_handle("", option);
 
}

              就是除去你前面那些删除链接之类的操作而已，你那个FLASH必须修改，而且我感觉你基本仅用FLASH播放一张图片确实多此一举。

              @mcooo:

              回复 |  回复并邮件
              • mcooo mcooo 说： ( Has commented 40 times in LL19.com )
                七月 4, 2010 18:50 于 6:50 下午

                @19.:FLASH必须修改吗，但为什么http://mcooo.com/#却可以回到首页，另那个FLASH不是一张图片啊，可以很多的呀！我说的是那个顶部的flash啊！不过那只有一张图片的flash实现也不错的。。。@19.:

                回复 |  回复并邮件
              • mcooo mcooo 说： ( Has commented 40 times in LL19.com )
                七月 4, 2010 19:10 于 7:10 下午

                @19.:点flash的links地址栏上链接会变成http://mcooo.com/#/links，如果在点击这个links之前你已经加载过http://mcooo.com/#/links的话，它就可以直接转到这个页的啊，我的意思可不可以当锚点是#/links；#/about;#/index…..就会加载内容?

                回复 |  回复并邮件
                • 19. 19. 说： ( Admin commented )
                  七月 4, 2010 19:30 于 7:30 下午

                  你以前加载过的内容监听会记录下来，你直接改变锚点是可以改变内容的，这就是相当浏览AJAX历史记录啊。

                  你以前没有加载过当然不会变化，你想每次都变化，就得像我说的那样修改成点击FLASH执行JS函数。

                  你如果就是想只靠FLASH输出锚点链接来实现AJAX，就要自己再写一个监听（或者修改以前监听），来得到每次更改的锚点，如果锚点有加载过就显示历史记录，没有加载过就执行AJAX加载。

                  我感觉你对整个全站AJAX的过程，包括锚点浏览历史记录根本没搞清楚。

                  @mcooo:

                  回复 |  回复并邮件
                  • mcooo mcooo 说： ( Has commented 40 times in LL19.com )
                    七月 4, 2010 19:39 于 7:39 下午

                    @19.:说说，点击FLASH执行JS函数和监听锚点哪个好啊，哪个容易实现啊！呵呵，很多我都只是明白一些原理要真正写的话，就不行了！

                    回复 |  回复并邮件
                  • mcooo mcooo 说： ( Has commented 40 times in LL19.com )
                    七月 4, 2010 19:45 于 7:45 下午

                    修改以前监听，可能会比较好吧，如果锚点有加载过就显示历史记录，没有加载过就执行AJAX加载。这样会更好啊，再有，那个顶部的flash是用JS加上链接的，我想会更好实现锚点AJAX加载吧！

                    回复 |  回复并邮件
  6. MCOOO MCOOO 说： ( Has commented 45 times in LL19.com )
    六月 27, 2010 2:52 于 2:52 上午

    博主：我又来麻烦你了，现在只有搜索这栏没能实现ajax,似乎你的用到JQ插件的，我想如像你那样我弄不来的，有其它的方法吗？即是可以不用JQ插件的做法。

    回复 |  回复并邮件
    • 19. 19. 说： ( Admin commented )
      六月 27, 2010 17:48 于 5:48 下午

      搜索也是一个道理啊，就是search.php这个页面判断是否AJAX就行了。我没用什么JQ插件。

      @MCOOO:

      回复 |  回复并邮件
      • mcooo mcooo 说： ( Has commented 40 times in LL19.com )
        六月 27, 2010 21:22 于 9:22 下午

        @19.:我用你的JS，但search是加载整个网页的啊，search.php已经判断是否AJAX的了！

        回复 |  回复并邮件
      • mcooo mcooo 说： ( Has commented 40 times in LL19.com )
        六月 28, 2010 1:07 于 1:07 上午

        @19.:search.php这个页面用什么方法判断！

        回复 |  回复并邮件
      • mcooo mcooo 说： ( Has commented 40 times in LL19.com )
        六月 28, 2010 1:10 于 1:10 上午

        @19.:$ajax=$_POST["ajax"];
        if ($ajax != “yes”)
        我用这种不行啊！

        回复 |  回复并邮件
        • 19. 19. 说： ( Admin commented )
          六月 28, 2010 12:25 于 12:25 下午

          搜索那页必须用GET才能得到，包括你提交的时候~

          @mcooo:

          回复 |  回复并邮件
          • mcooo mcooo 说： ( Has commented 40 times in LL19.com )
            六月 28, 2010 18:58 于 6:58 下午

            多谢你，现在可以了！

            回复 |  回复并邮件
      • mcooo mcooo 说： ( Has commented 40 times in LL19.com )
        六月 28, 2010 1:53 于 1:53 上午

        @19.: commonly_ajax_handle : function(ifAjaxForm, option) {
        if (ifAjaxForm != “”) {
        // jQuery(ifAjaxForm).ajaxForm(option);
        jQuery(ifAjaxForm).ajaxSubmit(option);
        } else {
        jQuery.ajax(option);
        }
        }

        这个和那个JQ插件有关系啊！如何除去呢？

        回复 |  回复并邮件
        • 19. 19. 说： ( Admin commented )
          六月 29, 2010 11:35 于 11:35 上午

          ajaxSubmit是JQUERY FORM插件中的函数，主要用在AJAX留言，毕竟搜索和留言其实都是提交，所以在搜索中也使用了ajaxSubmit。

          如何除去？删除不就行了。

          你不要总是照搬硬套啊，你总也得想想这个功能如何设计，如何实现，之后再如何去写代码，你总是这样把别人的代码拿来“强行使用”，客户端的人随意一个非正常操作你做的功能难免不会出错啊。

          @mcooo:

          回复 |  回复并邮件
      • mcooo mcooo 说： ( Has commented 40 times in LL19.com )
        六月 28, 2010 18:40 于 6:40 下午

        @19.:@19.:

        // JQUERY FORM 2.28

        这个不能除去吧！
        除去了search.php就不会AJAX了！

        回复 |  回复并邮件

回复分页(Comments pages):     « 早前评论   

文章回复(Leave a reply):

注意: 评论者允许直接点击留言人下方的“回复并邮件”按钮将自己回复的评论邮件通知另外评论者。点击“回复”按钮则只回复不发邮件。