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

Question

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

24

我已经阅读了所有有关于history.js的stack overflow帖子包括这篇，这篇和这篇，并查看了源代码，但作为一个新手的JavaScript / jQuery，我很难弄明白如何实际实现以支持html 5历史记录，并回退到支持html4浏览器，例如ie8/9。我可以理解从尽可能呈现一致的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来帮助我）。

我正在阅读这篇关于动态内容加载的文章，并尝试将其实现在我的网站上（我可以让这段代码运行，但我知道它在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...  ?
}

- pappley

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robert Hoffmann · Accepted Answer

仅仅在网站上添加历史记录支持并没有任何作用，除非您实际上已经有相应的功能来使用它。

就现代化而言，它只告诉您当前浏览器是否支持历史记录，如果采取行动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事件。而且，由于您已经订阅了该事件，因此您可以确定您之前保存的状态并调用函数相应地更改用户界面。

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

这基本上就是全部内容了。客户端触发一个函数，你分配一个状态/网址，当客户端点击返回按钮时，你会查看以前的状态并根据需要运行函数来恢复UI或其他操作。

这一切很快就会变得复杂和棘手，我不知道还有什么需要解释的，所以除非你现在完全理解并知道该怎么做，否则我建议你暂时不要考虑这些东西。

这里没有任何自动化操作，除了保存/恢复状态之外，你的应用程序中所有其他部分都需要手动编码以考虑状态更改会发生什么。

此外，深度链接与这些无关。你的应用程序必须具备初始化自身并根据直接通过URL调用它显示特定UI元素的能力。历史记录仅用于用户已经使用应用程序时的状态管理，因此你可以控制当他们点击后退/前进按钮时会发生什么。

对于搜索引擎来说，所有通过JS发生的任何事情都不会给你带来任何好处，因为它们不关心js，并且只会索引你页面的纯文本。因此，如果你想获得搜索引擎兼容的深度链接，你需要使用服务器端代码根据请求的URL将UI呈现为特定状态。