Question

我正在开发一个小项目，我想在其中创建一个Ajax风格的网站。内容加载了jQuery的load()。正如你们中的一些人所知，这样做的缺点是URL不会相应地改变显示的内容。要完成这项工作，您可以使用pushState()。由于这不支持跨浏览器，因此我使用了插件history.js。

这很好用，但问题是我的后退和前进按钮不能正常工作，我不知道我做错了什么。 URL正在正确更改，内容也是如此，但标题根本没有变化。标题我的意思是显示为浏览器窗口的窗口（或标签）的标题。即加载页面的<title>或引用该页面的链接的title属性（它们是相同的）。我认为这与我只调用我需要标题的页面部分（即将#content添加到load()）这一事实有关。我仍然想要那个页面的标题。这是我迄今为止所做的测试案例。（自2013年12月28日起不再提供。）jQuery文件：

$(document).ready(function () {
    var firstLink = $("ul > li:first-child > a");
    var menuLink = $("ul > li > a");
    var firstLoadedHtml = firstLink.attr("href") + " #content";

    $("#sectionContainer").hide().load(firstLoadedHtml).fadeIn("fast");
    firstLink.addClass("active");   

    menuLink.click(function(e) {
        history.pushState(null, null, this.href);

        e.preventDefault();
        e.stopImmediatePropagation();

        var CurLink = $(this);
        var newLoadedHtml = CurLink.attr("href") + " #content";
        var oldSection = $(".contentPage");

        $("#sectionContainer").hide().load(newLoadedHtml).fadeIn("fast");
        menuLink.removeClass("active");
        CurLink.addClass("active");
    });

    $(window).bind('popstate', function() {
            var returnLocation = history.location || document.location;

            $('#sectionContainer').load(returnLocation + "#content");
    });
});

我还注意到，当回到基本页面（即/ sectionLoaderTest /）时，它会空白一段时间，并且只在一段时间后加载第一页的内容。有没有办法优化这个？

此外，我使用jQuery将一个活动类添加到已被单击的链接。我怎样才能确保这会根据历史变化？以便在用户导航回来时突出显示正确的链接？

所以这三个问题是：

前进和后退时使标题正常工作
优化主页的加载时间
前进和后退时修复活动类

欢迎所有帮助！

注意1 ：我想建立在history.js和我自己的脚本之上，并因此保持对< HTML5浏览器的支持。我更喜欢这个因为1.我知道这必须起作用，有一些事情会出错。 2.如果我能够看到一个解决方案并在我已编写的脚本中实现它而不是计算出一个全新的脚本，那将节省时间。

注2 ：赏金只会给予能够回答我所有问题的人（3）！

Answer 1

答案1 - 前进和后退时使标题正常工作

据我所知，你想要更改文档标题html从链接加载到div中。当您通过jQuery .load在div中加载文件时，您只需在其中输入ajax请求后插入完整的响应文本。所有内容都不应该是title或meta标记中的div。但是，当前文档的标题（http://bramvanroy.be/sectionLoaderTest/index.html）是在title标记内定义的head中定义的，而不是在div内的title标记中定义的，这就是为什么文件标题不会改变。

那我该怎么办呢？

很好的问题，因为title元素中的div元素无效，大多数浏览器会将其删除，因此您不能只使用它：

document.title = $("#sectionContainer title").text();

因为title元素可能不存在。

所以我们需要的是jQuery .load函数的直接响应。我可以通过向函数添加回调参数来获得它：

$("#sectionContainer")
    .hide()
    .load(newLoadedHtml, function(responseText) {
        document.title = $(responseText).filter("title").text();
    })
    .fadeIn("fast");

您可能不理解的是我使用.filter而不是.find功能的原因。这是因为jQuery解析了html中的html，head和body标记，但没有删除子元素。

答案2 - 优化主页的加载时间

文档正在从顶部到底部加载。

首先应该加载css，JavaScript等，然后加载主文档。因为jQuery在执行文件之前总是在等待文档，所以将所有script元素放在正文结尾之前是不是一个非常糟糕的主意，这样就可以在之前加载HTML了。

顺便说一下，我在第一次遇到这个问题后，所有内容都被缓存，文档加载速度非常快。

答案3 - 前进和后退时修复活动课程

我会说循环通过href元素的a属性，并将其与History.getState()的数据进行比较。应该很容易。

您在代码中犯了一些错误 - 您的固定代码：

您将散列#content附加到所有网址...它没有意义，它将被jQuery删除：https://github.com/jquery/jquery/blob/master/src/ajax.js#L617（来自行：158,190,337,617 - rhash在6号线上

$(document).ready(function () {
    var firstLink = $("ul > li:first-child > a");
    var menuLink = $("ul > li > a");
    var firstLoadedHtml = firstLink.attr("href");

    $("#sectionContainer").hide().load(firstLoadedHtml).fadeIn("fast");
    firstLink.addClass("active");   

    menuLink.click(function(e) {

        e.preventDefault();
        e.stopImmediatePropagation();

        var newLoadedHtml = $(this).attr("href");

        History.pushState(null, newLoadedHtml, newLoadedHtml);

        $("#sectionContainer")
            .hide()
            .load(newLoadedHtml, function(responseText) {
                document.title = $(responseText).filter("title").text();
            })
            .fadeIn("fast");
    });

    History.Adapter.bind(window, "statechange", function() {
        menuLink.removeClass("active");
        $("a[href='" + History.getState().title + "']").addClass("active");
        $('#sectionContainer').load(document.location.href, function(responseText) {
            document.title = $(responseText).filter("title").text();
        }); 
    });
});

Answer 2

您还可以尝试使用 davis.js 或 jQuery Pusher 等路由插件 https://github.com/salvan13/jquery-pusher

pushState（）和popState（）：操纵浏览器的历史记录

2 个答案: