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

How do I actually use history.js on my site

提问by pappley

I've read all the posts about history.js on stackoverflow including, this, thisand thisand at looked the source codebut as a newcomer to javascript/jquery I'm having trouble figuring out how to actually implement to have html 5 history support and fallback to support html4 browsers such as ie8/9. As I can appreciate the UX benefits from presenting consistent URL's as much as possible, how this solves deep linking and allows for bookmarking I want to implement but I get a bit lost when trying to actually use this on my site.

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

After adding history.js script to my page

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

The code to modify as I undertand it is:

根据我的理解，要修改的代码是：

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

Is the //Change our stateswhere all new code goes as this code just gives examples of the history controls?

是//Change our states所有新的代码，就如同代码只是给历史对照的例子吗？

Or should I be writing my own code in place of this whole code block (I use jquery to help me at this point, given my newness to coding).

或者我应该编写自己的代码来代替整个代码块（鉴于我对编码的陌生，此时我使用 jquery 来帮助我）。

I was reading this articleabout dynamic content loading and trying to implement on my site(I can get this code to work but I know that it won't play well in ie8/9), but am having trouble trying to figure out how to combine with history.js

我正在阅读这篇关于动态内容加载的文章，并试图在我的网站上实现（我可以让这段代码工作，但我知道它在 ie8/9 中不能很好地发挥作用），但我无法弄清楚如何与 history.js 结合

Aslo, secondarily, I'm trying to figure out how history.js plays with modernizr?

Aslo，其次，我想弄清楚 history.js 如何与 Modernizr 一起玩？

Is it a replacement for modernizr.history (where it does the testing and if there is no support for .js falls back to typical page loading) or would it function like this:

它是 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...  ?
}

回答by Robert Hoffmann

Just adding history support to your site won't help you in any way unless you actually have functions in place that make use of it.

仅向您的站点添加历史支持不会以任何方式帮助您，除非您确实拥有使用它的功能。

As far as modernize goes it just tells you if history is supported on the current browser and if you take action x else action y

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

Ok so this is how history would work:

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

Consider history.jskind of like a macro recorder. A client clicks something and you push some variables that you associate with a made up or real url:

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

Client clicks a search for example, you call:

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

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()
}

And now when the client clicks the back button, you can get the previously saved state to do something with it. Since the client hits his backbutton, it will trigger statechange. And since you are subscribed to that event, you can determine what state you previously saved and call functions to change the UI accordingly.

现在，当客户端单击后退按钮时，您可以获得先前保存的状态以对其进行处理。由于客户端点击了他的后退按钮，它将触发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);
  }
});

That pretty much sums it up. Client triggers a function, you assign a state/url, and when client clicks back you look at your previous state and run functions depending on if you want to restore UI or other.

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

This can all quickly become complicated and tricky code and I don't see what else there is to explain, so unless you just got the AHA! and now know what to do, I'd just forget about this stuff for now.

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

There is absolutely nothing automatic going on here aside for saving/restoringstates, everything else in your application will need to be hand-coded to take into account what happens if a state changes.

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

Also deep linking has nothing to do with these things. Your application has to have the capacity to initialize itself and display specific UI elements uniquely based on calling it directly via a url. History is solely for state management when users are already using your application, so you are able to control what happens when they hit the back/forwardbutton.

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

And anything that happens via JS, will give you zero benefits as far as search engines are concerned as they don't care about js and will just index the raw text of you page. So if you want search engine compatible deep linking, you need server side code that renders you UI to a specific state depending on requested URL.

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