我如何在我的网站上实际使用history.js
我已经在stackoverflow上阅读了关于history.js的所有post，包括， 这个 ， 这个和这个以及查看源代码但是作为javascript / jquery的新手我无法弄清楚如何实际实现html 5历史记录支持和回退以支持ie8 / 9等html4浏览器。 我可以通过尽可能多地呈现一致的URL来体会用户体验带来的好处，如何解决深层链接并允许我想要实现的书签，但是当我尝试在我的网站上实际使用它时，我有点迷失。
将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所有新代码所在//Change our states ，因为此代码仅提供历史控件的示例？
或者我应该编写自己的代码来代替整个代码块（鉴于我对编码的新颖性，我现在使用jquery来帮助我）。
我正在阅读这篇关于动态内容加载和尝试在我的网站上实现的文章 （我可以让这段代码工作，但我知道它在ie8 / 9中不能很好地运行）但是我很难弄清楚如何与history.js结合
其次，我想弄清楚history.js如何与现代化一起玩？
它是modernizr.history的替代品（它在哪里进行测试，如果没有.js的支持可以回退到典型的页面加载），或者它的function如下：
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... ? }
只是向您的网站添加历史记录支持对您没有任何帮助，除非您实际拥有使用它的function。
就现代化而言，它只是告诉您当前浏览器是否支持历史记录，以及是否采取行动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呈现为特定状态。