`
aiyou110
  • 浏览: 30880 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

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

 
阅读更多

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

解决方案如下:

方案一:使用window. Onhashchange 事件

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

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

<div id="mainPanel">
</div>
复制代码

首先写一个方法来获取当前url中指定keyhash值,如下:

复制代码
<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

对于要兼容IE6IE7的情况,笔者一直使用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>
复制代码
 
 
分享到:
评论

相关推荐

    发现个AJAX图片浏览器SIMPLEVIEWER.docx

    这款轻量级的解决方案使得用户能够在不刷新整个网页的情况下,流畅地浏览和展示图片集。以下是关于SIMPLEVIEWER的一些关键知识点: 1. **AJAX技术**:AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载...

    ajax课件

    Ajax的缺点与解决方案 - **浏览器兼容性**:早期版本的IE浏览器对XMLHttpRequest支持不完善,可通过jQuery等库解决。 - **SEO问题**:搜索引擎爬虫可能无法抓取到Ajax加载的内容。可以通过服务器端渲染或使用...

    Ajax.in.Practice.pdf

    - **浏览器历史管理**:确保用户能够正常地使用浏览器的后退按钮。 - **状态恢复**:当用户刷新页面时能够恢复之前的状态。 #### 9. 拖放功能 - **拖拽效果**:实现拖放元素的交互效果。 - **文件上传**:使用Ajax...

    解决微信内置浏览器返回上一页强制刷新问题方法

    在微信内置浏览器中,用户在返回上一页面时遇到的问题是页面被强制刷新,这会导致AJAX加载的...这种解决方案对于那些依赖AJAX动态加载内容的单页面应用尤其重要,因为它确保了用户在页面间的导航不会丢失之前的状态。

    pjax 示例代码

    Pjax,全称是Push State + AJAX,是一种结合了HTML5 History API和AJAX技术的网页开发方式,它的主要目标是实现页面的快速加载,提升用户体验,同时保持浏览器历史记录的连贯性。在传统的AJAX应用中,虽然可以异步...

    解决kindeditor 编辑器完美支持IE11 看不见上传文件框问题 无法保存问题

    同时,阅读KindEditor的官方文档和社区论坛,查看是否有已知的解决方案或者更新修复。 在提供的"使用说明.doc"文件中,应包含了详细的步骤和代码示例,指导用户如何进行上述调整。仔细阅读这份文档,根据步骤操作,...

    WYMeditor基于Web浏览器的可视化HTML编辑器v1.0.0b3

    通过阅读这个文件,用户可以了解到新版本中引入的新功能、性能优化以及已知问题的解决方案。 3. **README.md**: 这是项目的说明文件,同样采用Markdown格式,通常包含了安装指南、使用教程、配置选项等信息。对于...

    ajaxfileupload 返回时 去掉 <pre>与 jquery1.7支持解决 方法

    在实际应用中,除了直接修改AjaxFileUpload组件,还可以考虑使用更现代的文件上传解决方案,比如基于HTML5的File API,它们通常提供更好的API和更多的特性,且更易于与现代的jQuery版本和其他前端框架集成。...

    EasyValidation

    EasyValidation,正如其名,是一款由我们公司成员精心研发的轻量级AJAX验证工具,旨在为开发者提供一个简单易用且功能强大的验证解决方案。 EasyValidation的核心是JavaScript,它充分利用了JavaScript的灵活性和...

    螃蟹poend博客程序 v1.0

    通过Pjax,用户在点击链接时,只有页面内容发生更新,而头部和底部导航保持不变,这样既提供了更快的页面加载速度,又保留了浏览器历史记录,使得用户体验更为顺畅。 2. **PHP**:这是一种服务器端的脚本语言,广泛...

    asp聊天程序,免费

    这个"asp聊天程序"是一个基于ASP技术构建的在线聊天平台,它提供了免费的解决方案,适合那些想要搭建简单聊天功能的用户。下面将详细讨论ASP编程、聊天程序的核心技术和实现方法。 首先,ASP的工作原理是:在服务器...

    asp.net文件管理系统

    7. **版本控制**:对于需要保留历史版本的文件,系统可以提供版本控制功能,允许用户回滚到以前的版本。 8. **批量操作**:支持批量删除、移动、重命名文件或目录,提高操作效率。 9. **日志记录**:对用户的文件...

    web-historian

    这个项目可能包含了对浏览器历史数据的抓取、解析、存储以及展示的实现,展示了对前端开发技术的熟练掌握。 JavaScript,作为该项目的核心编程语言,是Web开发中的关键工具,特别是在客户端交互方面。JavaScript...

    jquery-1.6.4.js

    无论是DOM操作、事件处理、动画效果,还是Ajax和插件生态,jQuery都提供了强大且易用的解决方案。对于Web开发者来说,熟练掌握jQuery 1.6.4的使用,能够大幅提升开发效率,创造更加优质的用户体验。

    JavaScriptTest

    JavaScriptTest可能包含练习题、测试用例、代码片段和解决方案,帮助开发者巩固这些知识点并提高技能。通过实践和测试,你可以更好地理解和掌握JavaScript的核心概念,从而在网页开发中游刃有余。

Global site tag (gtag.js) - Google Analytics