zoukankan      html  css  js  c++  java
  • history.js使用方法(来自博客园)

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

    <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">

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

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

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


           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>

    $(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>

  • 相关阅读:
    [XPath] XPath 与 lxml (五)XPath 实例
    [XPath] XPath 与 lxml (四)XPath 运算符
    [XPath] XPath 与 lxml (三)XPath 坐标轴
    [XPath] XPath 与 lxml (二)XPath 语法
    拥抱.NET Core系列:MemoryCache 缓存过期
    拥抱.NET Core系列:MemoryCache 初识
    一个开源的强类型客户端(.NET 中的 Open Fegin)— Rabbit Go
    Configuration Extensions
    拥抱.NET Core系列:Logging (1)
    拥抱.NET Core系列:依赖注入(2)
  • 原文地址:https://www.cnblogs.com/Alex80/p/5809134.html
Copyright © 2011-2022 走看看