2

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

我已经做了什么

通过查看插件的API Exposed 部分并阅读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 提供的代码中工作，并且到目前为止得到了这个（仅用于测试目的）：

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按照 section 中定义的方式工作，与返回的属性相同title，但仍然没有任何反应！

4

2 回答 2

2

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

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

于 2012-08-12T00:32:50.440 回答
1

你的脚本应该有一些功能来显示“当前”的 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 的更多信息在这里

于 2012-08-09T10:30:32.543 回答