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

Question

我已经在stackoverflow上阅读了关于history.js的所有帖子,包括,this,this和this以及查看源代码,但作为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所有新代码都在哪里,因为这段代码只提供历史控件的示例？

或者我应该编写自己的代码来代替整个代码块(鉴于我对编码的新意,我现在使用jquery来帮助我).

我正在阅读这篇关于动态内容加载和尝试在我的网站上实现的文章(我可以让这个代码工作,但我知道它在ie8/9中不能很好地发挥作用)但是我很难弄清楚如何与history.js结合

其次,我想弄清楚history.js如何与现代化一起玩？

它是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类似于宏录制器.客户端点击某些内容并推送一些与组合或真实网址相关联的变量:

客户点击搜索,例如,您调用:

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呈现为特定状态.