我如何实际使用history.js在我的网站 [英] How do I actually use history.js on my site

问题描述

我读过所有的帖子关于计算器history.js，包括<一href="http://stackoverflow.com/questions/7369043/cant-understand-history-js-need-it-simplified">this, <一href="http://stackoverflow.com/questions/4015613/good-tutorial-for-using-html5-history-api-pushstate">this和这并在看着的来源$ C ​​$ C 但是作为一个初来乍到的JavaScript / jQuery的我无法搞清楚如何真正实现有HTML 5的历史支持和后备支持HTML4浏览器，比如IE8 / 9。我可以AP preciate从UX收益presenting一致的URL尽可能的，如何解决深层链接，并允许书签我想要实现，但我得到试图实际使用时有点失去了我站点。

添加history.js脚本到我的网页后，

在code修改，因为我undertand是：

 函数（窗口，未定义）{

    // prepare
    VAR记录= window.History; //注意：我们使用的是较低的h的大写的H，而不是
    如果（！History.enabled）{
         // History.js是该浏览器中禁用。
         //这是因为我们可以随意选择支持HTML4浏览器或不。
        返回false;
    }

    //绑定到stateChange事件
    History.Adapter.bind（窗口，statechange'，函数（）{//注意：我们正在使用popstate的statechange代替
        变种状态= History.getState（）; //注意：我们正在使用History.getState（），而不是event.state
        History.log（State.data，State.title，State.url）;
    }）;

    //改变我们的国家
    History.pushState（{状态：1}，国1，状态= 1？）; //日志{状态：1}，国1，？状态= 1
    History.pushState（{状态：2}，国2，状态= 2？）; //日志{状态：2}，国2，？状态= 2
    History.replaceState（{状态：3}，国3，状态= 3？）; //日志{状态：3}，国3，？状态= 3
    History.pushState（NULL，NULL，？状态= 4）; //日志{}，''，？状态= 4
    History.back（）; //日志{状态：3}，国3，？状态= 3
    History.back（）; //日志{状态：1}，国1，？状态= 1
    History.back（）; //日志{}，主页，？
    History.go（2）; //日志{状态：3}，国3，？状态= 3

}）（窗口）;
 

是 //改变我们的状态，所有新的code，就如同code只是给历史对照的例子？

或者我应该写我自己的code代替这整个code块（我使用jQuery来帮助我在这一点上，给我的新鲜感来编码）。

我在读这文章并试图实现我的网站上（我能得到这个code的工作，但我知道，它不会在IE8 / 9玩得好），但我有麻烦试图找出如何与history.js

Aslo，其次，我试图找出如何用Modernizr的history.js戏？

它是一个替代品modernizr.history（如果它的测试，如果有对.js文件不支持回退到典型的网页加载），或者将它的功能是这样的：

 如果（Modernizr.history）{
   // code到这里的作品，如果它的HTML 5浏览器.history中的支持？我知道有些HTML5的浏览器处理.history中奇怪（读越野车），在这些情况下，所以会发生什么？
} 其他 {
   从上面// code到这里？与功能（窗口，未定义）{...等...？
}
 

解决方案

只是增加历史支持，您的网站将不会帮助你以任何方式，除非你确实有到位的功能，利用它。

至于现代化的推移它只是告诉你，如果历史是支持当前的浏览器，如果你采取动作X别的动作Y

确定，所以这是历史如何将工作：

考虑一种 history.js 像宏录制。客户端点击的东西，你推你联想到一个由或实际的URL一些变量：

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

 功能搜索（PARAMS）{
  //记录当前的UI位置
  //数据（保存），标题（以页面上设置），网址（以页面上设置）
  History.pushState（{params：一个PARAMS}，搜索，搜索？）;


   //现在运行一切应该发生，因为客户端触发搜索（）
}
 

现在，当客户端点击返回按钮，就可以得到previously保存的状态，以用它做什么。由于客户端击中他的后退按钮时，会触发 statechange 。而且，由于您订阅了该事件，你可以决定什么样的状态，你previously保存，调用函数相应地改变用户界面。

  //绑定到stateChange事件
History.Adapter.bind（窗口，statechange'，函数（）{
  变种状态= History.getState（）;

  //返回{数据：{params：一个PARAMS}，标题：搜索：URL：搜索？}
  执行console.log（国）;

  //或者你还记得搜索（），因为这就是这个状态保存
  如果（State.url ==？搜索）{
    搜索（data.params）;
  }
}）;
 

这pretty的多总结起来。客户端触发功能，在设定状态/网址，当客户点击回你看看你的previous状态和运行功能，具体取决于您是否要恢复用户界面上或其他。

这都可以迅速变得复杂和棘手code，我看不出还有什么有解释，所以，除非你刚刚得到AHA！现在知道该怎么做，我只是忘了这个东西现在。

绝对没有自动会在这里留出保存/恢复状态，一切在你的应用程序将需要手工codeD考虑如果一个国家的变化会发生什么。

此外深层链接无关的这些事情。您的应用程序必须有自身初始化并显示唯一的基础上，直接通过URL调用它特定的UI元素的能力。历史是专为国家管理当用户已经在使用你的应用程序，让您可以控制​​时，击中发生的事情后退/前进按钮。

和任何通过JS出现这种情况，将会给你零收益尽可能搜索引擎关注，因为他们不关心js和只会索引你页面的原始文字。所以，如果你想搜索引擎兼容的深层链接，则需要服务器端code呈现你UI到一个特定的国家根据请求的URL。

I've read all the posts about history.js on stackoverflow including, this, this and this and at looked the source code but 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.

After adding history.js script to my page

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 states where all new code goes as this code just gives examples of the history controls?

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

I was reading this article about 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

Aslo, secondarily, I'm trying to figure out how history.js plays with 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:

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

解决方案

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

Ok so this is how history would work:

Consider history.js kind of like a macro recorder. A client clicks something and you push some variables that you associate with a made up or real 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.

// 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.

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.

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

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/forward button.

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.

这篇关于我如何实际使用history.js在我的网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！