History.js的实现 [英] Implementation of History.js

问题描述

我想实现History.js我的AJAX的网站，这样我就可以使用前进和后退按钮，甚至书签。然而，例如@ https://github.com/browserstate/History.js/ 有我有点困惑，因为进入如何实现它。有没有人有一个简单的教程或例子就如何使用此。我们可以用它来启动这个例子的一个例子是为

导航链接等

 ＆LT;脚本类型=文/ JavaScript的＆GT;
在window.onload =功能（）
{
功能1（）;
};
 

 ＆LT; UL＆GT;
＆LT;李＆GT;＆LT; A HREF =JavaScript的：功能1（）＆GT;功能1＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =JavaScript的：函数2（'参数'，'参数'）＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
 

解决方案

我很难充分了解如何使用History.js。下面是从他们的维基我的意见进行说明一些code：

1。得到一个参考history.js对象

要获得一个参考History.js对象引用window.History（国会H）。

  VAR记录= window.History;
 

要检查HTML5的历史已启用检查History.enabled。 History.js仍然有效使用哈希标签，如果事实并非如此。

  History.enabled
 

2。倾听历史的变化，从这里更新您的看法

要监听的历史状态更改绑定到适配器对象的stateChange事件。

  History.Adapter.bind（窗口，statechange'，函数（）{
    变种状态= History.getState（）;
    History.log（State.data，State.title，State.url）;
}）;
 

3。通过推操纵历史的国家或更换

要的状态添加到历史，打电话pushState。这将增加一个状态到历史堆栈的端部将触发'statechange'事件如上所示。

  History.pushState（？urlforthestate = 1{数据任何类型的数据对象}，国家名称）;
 

要更换一国的历史，呼吁replaceState。这将取代在历史堆栈将触发statechange'事件如上图所示的最后状态。

  History.replaceState（？urlforthestate = 1{数据任何类型的数据对象}，国家名称）;
 

pushState和replaceState之间的区别是，pushState将增加一个状态到历史列表，replaceState将覆盖最后的状态。

注：pushState和replaceState序列化的数据对象，所以用最少的数据有

4。如果要添加其他用户界面为用户能够浏览历史记录，使用导航命令

使用回来，去浏览通过code中的历史。

  History.back（）;
History.go（2）;
 

其他：使用A标记历史

要使用一的标签与历史，你将需要拦截单击事件和prevent浏览器的使用情况进行导航。preventDefault（）方法。

例如：

 ＆LT; A HREF =狗/猫称号=狗和猫＆GT;狗和猫＆LT; / A＆GT;

$（'A'）。点击（函数（五）{
    即preventDefault（）;
    VAR URL = $（本）.attr（HREF'）;
    VAR标题= $（本）.attr（标题）;
    History.pushState（{数据：标题}，标题，URL）;
}）;
 

我希望这有助于。

I am trying to implement History.js for my ajax site so that I can use forward and back buttons and even bookmarks. However the example @ https://github.com/browserstate/History.js/ has me a bit confused as into how to implement it. Does anyone have a simple tutorial or example on how to use this. An example we can use to start the example is a navigation link such as

<script type="text/javascript">
window.onload = function() 
{
function1();
};

<ul>
<li><a href="javascript:function1()">Function1</a></li>
<li><a href="javascript:function2('param', 'param')"</a></li>
</ul>

解决方案

I had trouble fully understanding how to use History.js. Here is some code from their wiki with my comments for explanation:

1. Get a reference to the history.js object

To get a reference to the History.js object reference window.History (Capitol 'H').

var History = window.History;

To check if HTML5 history is enabled check History.enabled. History.js will still work using hash tags if it is not.

History.enabled

2. Listen for history changes and update your view from here

To listen for history state changes bind to the statechange event of the Adapter object.

History.Adapter.bind(window,'statechange',function(){ 
    var State = History.getState(); 
    History.log(State.data, State.title, State.url);
});

3. Manipulate history states by using push or replace

To add a state to the history, call pushState. This will add a state to the end of the history stack which will trigger the 'statechange' event as shown above.

History.pushState({data:"any kind of data object"}, "State Title", "?urlforthestate=1"); 

To replace a state to the history, call replaceState. This will replace the last state in the history stack which will trigger the 'statechange' event as shown above.

History.replaceState({data:"any kind of data object"}, "State Title", "?urlforthestate=1"); 

The difference between pushState and replaceState is that pushState will add a state to the history list, replaceState will overwrite the last state.

NOTE: pushState and replaceState serialize the data object, so use minimal data there.

4. If you want to add additional ui for the user to be able to navigate the history, use the navigation commands

Use back and go to navigate the history via code.

History.back();
History.go(2);

Additional: Using "a" tags with history

To use "a" tags with history you will need to intercept click events and prevent the browser from navigating by using the event.preventDefault() method.

Example:

<a href="dogs/cats" title="Dogs and cats">Dogs and Cats</a>

$('a')​.click(function(e){
    e.preventDefault();
    var url = $(this).attr('href');
    var title = $(this).attr('title');
    History.pushState({data:title}, title, url);
})​;

I hope this helps.

这篇关于History.js的实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！