0

我有一个使用 .js 提供类似内容的网站：

var FluidNav = {
init: function() {
    $("a[href*=#]").click(function(e) {
        e.preventDefault();
        if($(this).attr("href").split("#")[1]) {
            FluidNav.goTo($(this).attr("href").split("#")[1]);
        }
    });
    this.goTo("home");
},
goTo: function(page) {
    var next_page = $("#"+page);
    var nav_item = $('nav ul li a[href=#'+page+']');
    $("nav ul li").removeClass("current");
    nav_item.parent().addClass("current");
    FluidNav.resizePage((next_page.height() + 40), true, function() {
         $(".page").removeClass("current"); next_page.addClass("current"); 
    });
    $(".page").fadeOut(500);
    next_page.fadeIn(500);

    FluidNav.centerArrow(nav_item);

},
centerArrow: function(nav_item, animate) {
    var left_margin = (nav_item.parent().position().left + nav_item.parent().width()) + 24 - (nav_item.parent().width() / 2);
    if(animate != false) {
        $("nav .arrow").animate({
            left: left_margin - 8
        }, 500, function() { $(this).show(); });
    } else {
        $("nav .arrow").css({ left: left_margin - 8 });
    }
},
resizePage: function(size, animate, callback) {
    if(size) { var new_size = size; } else { var new_size = $(".page.current").height() + 40; }
    if(!callback) { callback = function(){}; }
    if(animate) {
        $("#pages").animate({ height: new_size }, 400, function() { callback.call(); }); 
    } else {
        $("#pages").css({ height: new_size }); 
    }
}};

到目前为止一切顺利，但客户端希望集成浏览器后退按钮功能。我做了功课，在 SO 和其他来源的帮助下发现 pushState 和 popState 是实现这一目标的最佳方式。

如果您花一点时间阅读上面的代码，您会发现以下内容：

  1. 如果您在浏览器中键入 website.com/#team，您将获得首页，而不是 #team 页面。如果要导航到#team，则必须从那里单击。
  2. 如果您导航到#team，然后想要返回首页，然后按后退按钮，您将被重定向到访问网站之前的位置。可以这么说被踢出去了。

这样做是为了获得更流畅的浏览体验。

但是，我现在需要实现以下目标，并且对于必须对上面的 .js 文件进行哪些更改感到有些迷茫：

  1. 实现有效的后退按钮功能（操作浏览器的历史存储）
  2. 当我在 URL 栏中键入 website.com/#team 时，转到该页面而不是首页。

这是一个使用此功能构建的示例网站，因此您可以了解它的功能。http://themes.two2twelve.com/site/fluidapp/light/

4

2 回答 2

0

您可以尝试集成一个库来处理无法使用 pushState 的浏览器（回退到您所描述的哈希 url。过去我对History.js有过一些运气。（明白了吗？？）

于 2013-02-13T02:23:14.523 回答
0

注意：此答案由提问者提供，作为对问题的编辑，而不是作为答案。我已将其移至此处以符合站点标准。

我做了以下事情：

  1. 按照此处的说明将 History.js 下载并解压缩到我的服务器：https ://github.com/browserstate/history.js/

  2. 按照此处安装：https ://github.com/browserstate/ajaxify

  3. 从这里安装了 StateRouter看不懂 History.js，需要简化吗？在这里https://github.com/aknuds1/staterouter.js/tree/master/lib

到目前为止已经取得的成就：

现在 URLs 实际上会随着后退按钮而改变，这意味着：

我转到主页 -> 用户 -> 员工，然后使用后退按钮，URL 栏中的 URL 将更改如下：www.123.com/#staff -> www.123.com/#users -> www.123 .com/#home。然而，只有 UR1 改变，内容没有改变。有什么我想念的想法吗？

于 2019-08-22T09:37:50.097 回答