我如何在我的网站上实际使用 history.js

Question

我已经阅读了 stackoverflow 上关于 history.js 的所有帖子，包括 this、this 和 this，并查看了 source code，但作为 javascript/jquery 的新手，我无法弄清楚了解如何实际实现对 html 5 历史记录的支持和回退以支持 ie8/9 等 html4 浏览器。我可以从尽可能多地呈现一致的 URL 中体会到 UX 的好处，这如何解决深度链接并允许我想要实现的书签，但是当我尝试在我的网站上实际使用它时我有点迷失了。

将 history.js 脚本添加到我的页面后

据我所知要修改的代码是：

    function(window,undefined){

    // Prepare
    var History = window.History; // Note: We are using a capital H instead of a lower h
    if ( !History.enabled ) {
         // History.js is disabled for this browser.
         // This is because we can optionally choose to support HTML4 browsers or not.
        return false;
    }

    // Bind to StateChange Event
    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);
    });

    // Change our States
    History.pushState({state:1}, "State 1", "?state=1"); // logs {state:1}, "State 1", "?state=1"
    History.pushState({state:2}, "State 2", "?state=2"); // logs {state:2}, "State 2", "?state=2"
    History.replaceState({state:3}, "State 3", "?state=3"); // logs {state:3}, "State 3", "?state=3"
    History.pushState(null, null, "?state=4"); // logs {}, '', "?state=4"
    History.back(); // logs {state:3}, "State 3", "?state=3"
    History.back(); // logs {state:1}, "State 1", "?state=1"
    History.back(); // logs {}, "Home Page", "?"
    History.go(2); // logs {state:3}, "State 3", "?state=3"

})(window);

//Change our states 是否是所有新代码所在的位置，因为此代码仅提供了历史控件的示例？

或者我应该编写自己的代码来代替整个代码块（鉴于我对编码的新手，我现在使用 jquery 来帮助我）。

我正在阅读此 article 关于动态内容加载并尝试在我的网站上实现的内容（我可以让这段代码工作，但我知道它在 ie8/9 中无法正常运行），但我在尝试时遇到了麻烦弄清楚如何与history.js结合

另外，其次，我想弄清楚 history.js 如何与modernizr 配合使用？

它是不是modernizr.history 的替代品（它在哪里进行测试，如果不支持.js 则退回到典型的页面加载）还是会像这样运行：

if (Modernizr.history) {
   //Code goes here that works if it's HTML 5 Browser with .history support? I know some HTML5 browsers deal with .history oddly (read buggy) so what happens in those cases?
} else {
   //code from above goes here? with function(window, undefined){...etc...  ?
}

Answer 1

只是向您的网站添加历史支持不会对您有任何帮助，除非您确实有使用它的功能。

就现代化而言，它只是告诉您当前浏览器是否支持历史记录以及您是否采取行动 x 否则行动 y

好的，这就是历史的运作方式：

考虑history.js 有点像宏记录器。客户点击某些东西，然后您推送一些与虚构或真实 url 相关联的变量：

客户点击搜索例如，你调用：

function search(params) {
  // record your current UI position
  // data (to save), title (to set on page), url (to set on page)
  History.pushState({ params: params }, "Search", "?search");


   // now run whatever should happen because client triggered search()
}

现在，当客户端单击返回按钮时，您可以获取先前保存的状态以对其进行处理。由于客户点击了他的后退按钮，它将触发statechange。由于您订阅了该事件，因此您可以确定之前保存的状态并调用函数来相应地更改 UI。

// Bind to StateChange Event
History.Adapter.bind(window, 'statechange', function() {
  var State = History.getState();

  // returns { data: { params: params }, title: "Search": url: "?search" }
  console.log(State); 

  // or you could recall search() because that's where this state was saved
  if (State.url == "?search") {
    search(data.params);
  }
});

这几乎概括了它。客户端触发一个函数，您分配一个state/url，当客户端单击返回时，您会查看之前的状态并运行函数，具体取决于您是否要恢复 UI 或其他。

这一切很快就会变得复杂而棘手的代码，我看不出还有什么要解释的，所以除非你刚刚获得了 AHA！现在知道该怎么做了，我暂时忘记这些东西。

除了saving/restoring 状态之外，这里绝对没有任何自动发生的事情，您的应用程序中的其他所有内容都需要手动编码，以考虑到状态发生变化时会发生什么。

此外，深层链接与这些事情无关。您的应用程序必须具有初始化自身并基于通过 url 直接调用它来唯一地显示特定 UI 元素的能力。当用户已经在使用您的应用程序时，历史记录仅用于状态管理，因此您可以控制当他们点击back/forward 按钮时会发生什么。

通过 JS 发生的任何事情，就搜索引擎而言，会给您带来零收益，因为他们不关心 js，只会索引您页面的原始文本。因此，如果您想要与搜索引擎兼容的深度链接，则需要服务器端代码，根据请求的 URL 将您的 UI 呈现为特定状态。