控件中国网现已改版,您看到的是老版本网站的镜像,系统正在为您跳转到新网站首页,请稍候.......
中国最专业的商业控件资讯网产品咨询电话:023-67870900 023-67871946
产品咨询EMAIL:SALES@COMPONENTCN.COM

Ajax保留浏览器历史的解决方案

作者:未知 出处:cnblog 2012年11月26日 阅读:

在ajax请求中,不能更新地址栏,地址栏上的“前进”和“后退”按钮就失效了,带来了另外一种糟糕的用户体验。

解决方案如下:

方案一:使用window. Onhashchange 事件

如下面Html片段,点击不同的连接,在mainPanel中加载不同的页面:

<ul class="menu">
<li><a href="/home/index#page=1">page1</a></li>
<li><a href="/home/index#page=2">page2</a></li>
<li><a href="/home/index#page=3">page3</a></li>
</ul>

<div id="mainPanel">
</div>
首先写一个方法来获取当前url中指定key的hash值,如下:

<script type="text/javascript">
      //获取指定key的hash值
      function getHash(key, url) {
          var hash;
          if (!!url) {
              hash = url.replace(/^.*?[#](.+?)(?:\?.+)?$/, "$1");
              hash = (hash == url) ? "" : hash;
          } else {
              hash = self.location.hash;
          }

          hash = "" + hash;
          hash = hash.replace(/^[?#]/, '');
          hash = "&" + hash;
          var val = hash.match(new RegExp("[\&]" + key + "=([^\&]+)", "i"));
          if (val == null || val.length < 1) {
              return null;
          } else {
              return decodeURIComponent(val[1]);
          }
      }
  </script>
使用onhashchange事件触发ajax请求:
<script type="text/javascript">
       function loadPanel() {
        var page = getHash("page");
        if (page == 1) {
            $("#mainPanel").load("/home/page1");
        }
        if (page == 2) {
            $("#mainPanel").load("/home/page2");
        }
        if (page == 3) {
            $("#mainPanel").load("/home/page3");
        }
    }
    $(window).bind("hashchange", loadPanel);
 </script>

到这里工作已经完成了80%,为什么是80%呢,这里面还有一个问题:

当你直接在浏览器(新开的标签页)的地址栏里输入这样的地址:http://localhost:3859/home/index#page=3 或者通过QQ发给你的好友,看到的并不是如你所想的应该是page=3的内容,而是http://localhost:3859/home/index 的内容。原因很简单——页面加载的时候不会触发onhashchange事件。

所以我们要在上面的代码追加一行:

$(loadPanel);
//或者   
$(function(){ $(window).trigger("hashchange"); });onhashchange 事件location.hash发生改变的时候触发,可以很好解决AJAX刷新后退/前进键失效的问题,是一个新的事件,

目前chrome ,firefox,Opera,  Safari,IE8及以上版本浏览器都兼容。
其实对于那些死抱着IE6,IE7 不放的用户,咱也没必要给他们提供这样的用户体验。
 

方案二:使用jQuery.History.js
对于要兼容IE6、IE7的情况,笔者一直使用jquery.history.js 这个插件(https://github.com/tkyk/jquery-history-plugin)。

这个插件它会去判断浏览器是否支持onhashchange事件,如果不支持,就定时(每个100毫秒)循环判断hash有没有变化,从而执行相应处理。
如:
<script src="/Scripts/jquery.history.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $.history.init(function (hash) {
            var page = getHash("page");
            if (page == 1) {
                $("#mainPanel").load("/home/page1");
            }
            if (page == 2) {
                $("#mainPanel").load("/home/page2");
            }
            if (page == 3) {
                $("#mainPanel").load("/home/page3");
            }
        });
    });
</script>
另外,这个插件已经不再继续更新维护了。

方案三:jquery.ba-hashchange.js
jquery.ba-hashchange.js(http://benalman.com/projects/jquery-hashchange-plugin/)

这个插件的实现原理和jquery.history.js 完全一样。循环间隔为50毫秒。
它overwrite 了window.hashchange事件,使其能够兼容全部浏览器。
使用如下:
<script src="/Scripts/jquery.ba-hashchange.js" type="text/javascript"></script>
<script type="text/javascript">
    $(window).hashchange(function () {
        var page = getHash("page");
        if (page == 1) {
            $("#mainPanel").load("/home/page1");
        }
        if (page == 2) {
            $("#mainPanel").load("/home/page2");
        }
        if (page == 3) {
            $("#mainPanel").load("/home/page3");
        }
    });
    $(window).hashchange();
</script>

热推产品

  • ActiveReport... 强大的.NET报表设计、浏览、打印、转换控件,可以同时用于WindowsForms谀坔攀戀Forms平台下......
  • AnyChart AnyChart使你可以创建出绚丽的交互式的Flash和HTML5的图表和仪表控件。可以用于仪表盘的创......
首页 | 新闻中心 | 产品中心 | 技术文档 | 友情连接 | 关于磐岩 | 技术支持中心 | 联系我们 | 帮助中心 Copyright-2006 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 电话:023 - 67870900 传真:023 - 67870270 产品咨询:sales@componentcn.com 渝ICP备12000264号 法律顾问:元炳律师事务所 重庆市江北区塔坪36号维丰创意绿苑A座28-5 邮编:400020
在线客服
在线客服系统
在线客服
在线客服系统