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

我已经阅读了关于stackoverflow的所有关于history.js的帖子，包括 this， this和 this，并且看到了 source code，但作为javascript / jquery的新手，我无法弄清楚如何实际实现html 5历史支持并支持html4浏览器，如ie8 / 9。正如我可以欣赏到，尽可能地提供一致的URL的UX的好处，它如何解决深层链接，并允许我想要实现的书签，但是当我尝试在我的网站上实际使用这个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"
    History.pushState({state:2},"State 2","?state=2"); // logs {state:2},"?state=2"
    History.replaceState({state:3},"State 3","?state=3"); // logs {state:3},"?state=3"
    History.pushState(null,null,"?state=4"); // logs {},'',"?state=4"
    History.back(); // logs {state:3},"?state=3"
    History.back(); // logs {state:1},"?state=1"
    History.back(); // logs {},"Home Page","?"
    History.go(2); // logs {state:3},"?state=3"

})(window);

是//改变我们所有新代码的状态，因为这个代码只是给出了历史控制的例子？

或者我应该编写自己的代码代替这个整个代码块(我使用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...  ?
}

解决方法

只要添加历史支持到您的网站将无法以任何方式帮助您，除非您实际使用的功能使用它。

就现代化而言，它只是告诉你，当前浏览器是否支持历史记录，并且如果采取行动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()
}

而现在当客户点击后退按钮时，您可以获得以前保存的状态来执行某些操作。客户端点击后，将触发状态。由于您订阅了该事件，您可以确定先前保存的状态，并调用功能来相应地更改UI。

// Bind to StateChange Event
History.Adapter.bind(window,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);
  }
});

这几乎总结了。客户端触发一个功能，分配一个状态/ url，当客户端点击后，您可以看看以前的状态，并根据是否要恢复UI或其他功能运行功能。

这可以很快变得复杂和棘手的代码，我也看不到还有什么要解释，所以除非你刚刚得到AHA！现在知道该怎么办，我现在就忘了这个东西。

在保存/恢复状态方面绝对没有任何自动化，您的应用程序中的其他任何内容都需要手动编码，以便考虑到状态发生变化时会发生什么。

这些深层次的联系与这些东西无关。您的应用程序必须能够初始化自己，并通过直接通过url调用来显示特定的UI元素。当用户已经在使用您的应用程序时，历史记录仅用于状态管理，因此您可以控制当他们点击后退/转发按钮时会发生什么。

通过JS发生的任何事情，只要搜索引擎关心，就不会关心js，并且只会索引您的原始文本页面，这样您就可以获得零利益。因此，如果您希望搜索引擎兼容深度链接，则需要服务器端代码，根据请求的URL将UI呈现给特定状态。

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

解决方法

相关推荐