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等）但是当用户直接转到其中一个链接（或只是重新加载页面）时，他或她将收到消息网址不存在
即使浏览器的导航按钮是可点击的（和网址会相应更改）它根本不会更改内容。

任何人都可以对此提出任何反馈意见吗？我已经在这方面工作了很长时间，以至于我背后的伤害。

我尝试使用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对象中定义的标题。然而，我调整了代码，以便山雀应该工作data-url如章节中定义的那样与返回的title属性相同，但仍然没有任何反应！

Answer 1

查看历史记录的usage documentation。确保绑定到状态更改事件，如下所示：

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的一部分，有时称为锚：

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

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

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

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

Answer 2

您的脚本应具有显示“当前”网址的功能，例如：

var display_current=function() {
       //you may use History.getState() here, but i not sure what it will return, so i calculate url myself;
       var url=document.location.pathname.replace(/^.*\//,'');
       if (url == '') {url='home';}
       //Some code here to display current section based on URL
};

您应该在加载页面后运行该功能：

$(function() {display_current();});

然后您应该处理浏览器历史记录按钮的事件处理浏览器的后退/前进按钮使用：

History.Adapter.bind(window,'statechange',function() {
       display_current();
});

here the documentation

要防止404错误，您必须使用重定向规则将.htaccess文件添加到目录中：

RewriteEngine On
RewriteBase /
RewriteRule ^.+$  index.html

more info on mod_rewrite is here

全屏部分的History.js

我已经完成了什么

我似乎无法完成

2 个答案: