全屏部分的History.js

Question

---

我一直在做我的一个项目——完整的（重要的）JavaScript可以在这里找到。我希望包含history.js，这样用户就可以使用浏览器的上一个和下一个按钮进行导航。此外，我希望生成的URL是可访问的，即使它们不存在。这些URL由历史API生成，因此不会链接到HTML文档。

我已经做了什么

通过查看插件的API公开部分，并阅读Mozilla的文档，我成功地实现了这一点：

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

这个（精简的）代码是：

    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提供的代码，thusfar得到了这个（只是为了测试目的）：

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

查看History.js的使用文档。确保绑定到状态更改事件，如下所示：

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有效的一种方法是使用查询参数。查看文档，我们发现它们使用的不是完整的url，而是查询参数（例如?state=1）。试着使用类似的东西，比如：?page=lamp。

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

Answer 2

您的脚本应该有一些显示"当前"url的功能，比如：

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();
});

这是文件

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

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

有关mod_rewrite的更多信息，请点击此处