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

我制作了一个有两个边栏（左侧和右侧）的网站

两个侧栏都通过ajax

.load（）

函数（leftside.html和rightside.html）加载内容

左侧边栏包含菜单。我希望当有人单击菜单链接时，它会在

“#mainside”

div中打开，而无需借助哈希函数刷新页面，并保留历史记录，以便浏览器的“后退”按钮和“history.back”能够完美地工作

这是我的实际代码

leftside.html：

BBB

mainside:“a.html”或“b.html”必须加载其数据）

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

javascript:

var Anand={
配置：{
速度:300,，
放映时间：2500，
},
sideInit:function（）{
$（“body”）。在（“click”上，“#ls li>a”，函数（e）{
e、 预防默认值（）；
$（“正文”）.scrollTop（0）；
var me=这个；
Aanad.Util.showLoading（函数（）{
$.ajax({
url:$（me.attr（“href”）.replace（“#”，”），
成功：功能（r）{
$（#mainside”）.html（r）；
setTimeout（函数（）{
Anand.Util.doneLoading（）；
}, 600);
}
});
});
});
$（“正文”）。在（“单击”上，“ls.子菜单li>a”，函数（e）{
e、 预防默认值（）；
$（“正文”）.scrollTop（0）；
var me=这个；
Anand.Util.showLoading（函数（）{
$.ajax({
url:$（me.attr（“href”）.replace（“#”，”），
成功：功能（r）{
r=r+“




”；
$（#mainside”）.html（r）；
Anand.Util.doneLoading（）；
}
});
});
});
$（window.bind（“hashchange”，Anand.processHash）；
},
processHash:function（）{
hash=window.location.hash；
if（散列）
$（散列）。单击（）；
如果（散列=“#主”）
$（“#主页按钮”）。单击（）；
},
windowLoaded:function（）{
if（window.location.hash&&$（window.location.hash）.length）{
Anand.processHash（）；
setTimeout（函数（）{
$（“#预加载程序”）.fadeOut（）
}，Anand.Config.screenDuration）；
}否则{
$（“.sidebars li>a:first”）。单击（）；
setTimeout（函数（）{
$（“#预加载程序”）.fadeOut（）
}，Anand.Config.screenDuration）；
window.location.hash=“home”；
}
},
Util:{
showLoading:函数（回调）{
$（“.loading progress”）.hide（）；
$（“#mainside*”）。解除绑定（“单击”）；
$（“#mainside”）.fadeOut（Anand.Config.animSpeed）；
setTimeout（函数（）{
回调（）；
}, 501);
},
DoneLoad:函数（回调）{
$（“.loading progress”）.hide（）；
$（“#mainside”）.fadeIn（Anand.Config.animSpeed，function（）{
$（此）.scrollTop（0）；
回调（）；
});
},
激活单元：功能（el）{
$（文档）.ready（函数（）{
$（“.sidebars li>a”）.removeClass（“活动”）；
$（el）.addClass（“活动”）；
$（“#ls-”+$（el）.attr（“id”）.addClass（“活动”）；
Anand.Util.silentHashChange（$（el.attr（“id”）！=未定义？$（el.attr（“id”）：“”）
$（“正文，html”）.scrollTop（0）；
});
},
silentHashChange:函数（散列）{
$（窗口）.unbind（“hashchange”）；
window.location.hash=散列；
setTimeout（函数（）{
$（window.bind（“hashchange”，Anand.processHash）；
}, 100);
}
}
};
$（document）.ready（Anand.sideInit）；

使用此代码，链接可以将目标加载到

“#mainside”

，哈希函数也可以正常工作。但当我使用后退按钮时，它只是将当前哈希值更改为上一个，而不会将页面内容更改为上一个

我也尝试过“烧烤”，但结果是“0”

请帮帮我

---

感谢并问候

我建议您查看javascript MVC库，如

backbone.js

或

ember.js

它们非常适合您正在构建的应用程序（它们可以帮助您在这样的大型多状态web应用程序中开发更干净的代码）

事实上，它们都提供了一个

路由器

，它将散列绑定到事件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();

---

先生，您能为我提供这些MVC的演示吗。

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

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);

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();