如何管理动态加载的JavaScript应用程序的浏览器历史记录

Question

我创建了一个有两个侧边栏（左侧和右侧）的网站。

两个侧边栏都通过ajax .load()函数（leftside.html和rightside.html）加载内容。

左侧边栏包含菜单。我希望当有人点击菜单链接时，它会在'#mainside' div中打开，而不会在哈希函数的帮助下刷新页面并保留历史记录，以便浏览器的后退按钮和'history.back'可以正常工作完美。

这是我的实际代码。

leftside.html：

<div class="sidebars"><div id="ls"><ul>
  <li><a href="#a.html" class="left-ajax">AAA</a></li>
  <li><b href="#b.html" class="left-ajax">BBB</a></li></ul>
  <ul class="submenu">
  <li><a href="#c.html">CCC</a></li></ul>
  </div>
</div>

mainside :(其中'a.html'或'b.html'必须加载其数据）

<div id="mainside"></div>

目前，我正在使用此javascript代码加载内容并在网址栏中放置哈希值（但无法保留历史记录）

的javascript：

var Anand = {
  Config:{
    animSpeed: 300,
    screenDuration: 2500,
  },
  sideInit: function() {
    $("body").on("click","#ls li >a", function(e){
      e.preventDefault();
      $("body").scrollTop(0);
      var me = this;
      Aanad.Util.showLoading(function() { 
        $.ajax({
          url: $(me).attr("href").replace("#", ""),
          success: function(r) {
            $("#mainside").html(r);
            setTimeout(function() {
               Anand.Util.doneLoading();
            }, 600);
          }
        });
      });
    });
    $("body").on("click","#ls .submenu li >a", function(e){
      e.preventDefault();
      $("body").scrollTop(0);
      var me = this;
      Anand.Util.showLoading(function() { 
        $.ajax({
           url: $(me).attr("href").replace("#", ""),
           success: function(r) {
             r = r + "<br/><br/><br/><br/>";
             $("#mainside").html(r);
             Anand.Util.doneLoading();
           }
        });
      });
    });
    $(window).bind("hashchange", Anand.processHash);
  },
  processHash: function() {
    hash = window.location.hash;
    if (hash)
      $(hash).click();
    if (hash == "#home")
      $("#home-button").click();
  },
  windowLoaded: function() {
    if (window.location.hash && $(window.location.hash).length) {
      Anand.processHash();
      setTimeout(function() {
    $("#preloader").fadeOut()
      }, Anand.Config.screenDuration);
    } else {
      $(".sidebars li >a:first").click();
      setTimeout(function() {
    $("#preloader").fadeOut()
      }, Anand.Config.screenDuration);
      window.location.hash = "home";
    }
  },
  Util: {
    showLoading: function(callback) {
      $(".loading-progress").hide();
      $("#mainside *").unbind("click");
      $("#mainside").fadeOut(Anand.Config.animSpeed);
      setTimeout(function() {
        callback();
      }, 501);
    },
    doneLoading: function(callback) {
      $(".loading-progress").hide();
      $("#mainside").fadeIn(Anand.Config.animSpeed, function() {
        $(this).scrollTop(0);
        callback();
      });
    },
    activateMenu: function(el) {
      $(document).ready(function() {
        $(".sidebars li >a").removeClass("active");
        $(el).addClass("active");
        $("#ls-" + $(el).attr("id")).addClass("active");
        Anand.Util.silentHashChange($(el).attr("id") != undefined ? $(el).attr("id") : "")
        $("body, html").scrollTop(0);
     });
    },
    silentHashChange: function(hash) {
      $(window).unbind("hashchange");
      window.location.hash = hash;
      setTimeout(function() {
        $(window).bind("hashchange", Anand.processHash);
      }, 100);
    }
  }
};
$(document).ready(Anand.sideInit);

使用此代码，链接可以将目标加载到'#mainside'，并且哈希函数也可以正常工作。但是，当我使用后退按钮时，它只是将当前哈希值更改为上一个哈希值，而不会将页面内容更改为上一个。

我也试过'bbq'，结果是'0''。

请帮帮我......

谢谢和问候

Answer 1

我建议您查看javascript MVC库，例如backbone.js或ember.js，它们非常适合您正在构建的应用程序类型（它们可以帮助您在大型多状态Web应用程序中开发更清晰的代码，例如这一点）。

事实上，他们提供的一件事是Router它将哈希与事件a.k.a函数联系起来。

backbone.js例子：

var Workspace = Backbone.Router.extend({
  routes: {
    "":                     "default"  // # 
    "help":                 "help",    // #help
    "search/:query":        "search",  // #search/kiwis
    "search/:query/p:page": "search"   // #search/kiwis/p7
  },

  help: function() {
    //...
  },

  search: function(query, page) {
    //...
  }
});

var router = new Workspace();

// Another way to listen to routes.
router.on("route:defualt", function() {
  //...
});

// Starts listening to the hashchange event.
Backbone.history.start();

http://backbonejs.org/#Router

http://emberjs.com