jquery - 全屏部分的 History.js

Question

<小时/>

我一直在研究 a project of mine - 完整(重要)的 JavaScript 可以找到 here 。我希望包括history.js以便用户也可以使用浏览器的上一个和下一个按钮进行导航。另外，我希望生成的 URL 可以访问，即使它们不存在。这些 URL 由历史记录 API 生成，因此不会链接到 HTML 文档。

我已经做了什么

查看API Exposed section插件并通读 Mozilla's documentation ，我已经设法让它工作:

• 使用界面的下一个、上一个和基本链接导航时，网址正确
• 使用界面的下一个、上一个和基本链接导航时，标题是正确的

(精简的)代码是:

    document.title = $(".parentSection.base").data("title");


// Going forward
    var nextClick = $("a.next_link");

    nextClick.click(function(d) {       
        var nUrl = parentSection.next().data("url");
        History.pushState(null, null, nUrl) ;
        document.title = parentSection.next().data("title");

        d.preventDefault();
    });


// Going backwards
    var prevClick = $("a.prev_link");

    prevClick.click(function(e) {       
        var pUrl = parentSection.prev().data("url");
        History.pushState(null, null, pUrl) ;
        document.title = parentSection.prev().data("title");

        e.preventDefault();
    });


// Going to "Base" position
    var baseClick = $("a.base_link");

    baseClick.click(function(f) {           
        var bUrl = $(".parentSection.base").data("url");
        History.pushState(null, null, bUrl);
        document.title = $(".parentSection.base").data("title");

        f.preventDefault();
    });

这可以正常工作。

我似乎无法完成的事情

尽管这工作得相当巧妙，但如果没有最终的功能，它就毫无用处:

• 现在已生成 URL(例如 /lamp、/desk 等)，但当用户直接访问这些链接之一(或只是重新加载页面)时，他否则她会收到该 URL 不存在的消息
• 即使浏览器的导航按钮是可点击的(并且url 相应改变)它根本不会改变内容。

有人可以对此提供任何反馈吗？我已经为此工作了很长时间，现在我的背部受伤了。

<小时/>

我尝试使用 cjhveal 提供的代码进行工作，到目前为止得到了这个(仅用于测试目的):

History.Adapter.bind(window,'statechange',function(){
        var State = History.getState();
        History.log(State.data, State.title, State.url);
        $(".parentSection[data-url='" + State.title + "']").css({
            "left": "0",
            "top": "0"
        });
    });

奇怪的是，我无法让 History.js 记录正确的标题...当我记录页面时，它返回如下:"lamp", "bramvanroy.be/fullScreenSection/lamp" (分别为 title 和 url)，而我需要获取该部分的 data-title 对象中定义的标题。然而，我仍然调整了代码，以便 tit 应该工作 data-url ，如部分中定义的那样与返回的 title 属性相同，但仍然没有任何反应!

Answer 1

查看 usage documentation对于 History.js。确保您绑定(bind)到状态更改事件，如下所示:

History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
    var State = History.getState(); // Note: We are using History.getState() instead of event.state
    History.log(State.data, State.title, State.url);
    // Handle new state.
});

作为替代方案，某些 javascript 应用程序会使用哈希后的 url 部分，有时称为 anchor :

www.myapp.com/app/#/anchor/1

更改此部分不需要任何重新加载。现代浏览器甚至使用 PushState 来保存历史记录。这可以通过以下 JavaScript 来完成:window.location.hash = '/anchor/1'

编辑:确保 url 有效的一种方法是使用查询参数。看着documentation ，我们看到它们使用查询参数而不是完整的 url(例如 ?state=1)。尝试使用类似的内容，例如:?page=lamp。

此外，在您的点击处理程序中，尝试像示例中那样传递标题和数据。