Question

我在做了很多研究之后写的，所以请跟我一起做：我有一个网站，使用.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是实现这一目标的最佳方式。

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

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

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

但是，我现在需要实现以下目标，而且我对上面的.js文件要做出哪些更改有点遗失：

实现工作后退按钮功能（操作浏览器的历史存储）
当我输入网站http://#team时网址栏，转到该页面，而不是首页。

以下是使用此功能构建的示例网站，以便您了解其功能。 http://themes.two2twelve.com/site/fluidapp/light/

修改

感谢您的回答！我做了以下事情：

按照此处的说明下载History.js并将其解压缩到我的服务器：https://github.com/browserstate/history.js/
按照此处的安装：https://github.com/browserstate/ajaxify
从此处Can't understand History.js, need it simplified?安装StateRouter，此处https://github.com/aknuds1/staterouter.js/tree/master/lib

到目前为止取得的成就：

现在，URL实际上已使用后退按钮更改，这意味着：

我去主页 - ＆gt;用户 - ＆gt;员工，然后使用“后退”按钮，URL栏中的URL将如下更改： www.123.com/#staff - ＆gt; www.123.com/#users - ＆gt; www.123.com/#home 。但是，只有URl更改而不是内容。我缺少什么想法？

Answer 1

您可能会尝试集成一个处理无法使用pushState的浏览器的库（回退到您正在描述的哈希网址。过去我曾经有过History.js的运气。（获取它？）

Answer 2

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

我做了以下事情：

按照以下说明将History.js下载并解压缩到我的服务器：https://github.com/browserstate/history.js/
在此处进行安装：https://github.com/browserstate/ajaxify
从此处Can't understand History.js, need it simplified?和此处https://github.com/aknuds1/staterouter.js/tree/master/lib

到目前为止已实现：

现在，URL实际上是使用后退按钮更改的，这意味着：

我转到主页->用户->员工，然后使用“后退”按钮，URL栏中的URL会这样更改： www.123.com/#staff-> www.123.com/#users-> www.123.com/#home 。但是，只有UR1会更改，而内容不会更改。有什么想法我想念的吗？

PushState（）PopState（）集成

2 个答案: