我在本地测试应用程序上实现了History.js. 一切似乎都有效,但是如果我按下浏览器中的后退按钮,之前的内容就无法恢复.
当用户按下后退按钮时,我是否真的必须再次手动加载内容(即进行另一个ajax调用)?然后github如何做到这一点?我看到他们在单击代码树中的后退按钮时不再进行另一个ajax调用.
这是我的代码:
History.Adapter.bind(window,'statechange',function()
{
var State = History.getState();
History.log(State.data, State.title, State.url);
});
$('a').each(function(index, link) {
if ($(link).attr('data-ajax-disabled') != 'true') {
$(link).click(function(event)
{
var clips = $(this).attr('data-ajax-clips') || '';
$.ajax($(this).attr('href'),
{
data: {_clips:clips},
success: function(data)
{
var data = $.parseJSON(data);
History.pushState({state:1}, data.title || document.title, 'http://127.0.0.1/site/www/');
$.each(data.clips, function(key, val)
{
$(key).replaceWith(val);
});
}
});
return false;
});
}
});
Run Code Online (Sandbox Code Playgroud)
data.clips是一个json数组,它包含作为键的html对象的id和作为值的实际html内容.例如
'#header'=>'标题div中的内容'
如上所述,更换工作正常.我在标题中输出一个随机数.链接上的每次点击都会在标题中吐出另一个随机数.但是,如果按下后退按钮,数字保持不变,只会恢复标题(也是随机数).
我熟悉html5 History API,但我使用history.js来扩展兼容性,
我有一个问题就是这样,我怎么知道:
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
/* Condition here to know if this change is a back or next button, and wich one?? */
});
Run Code Online (Sandbox Code Playgroud)
这是我的"整体"代码......
var the = this;
var History = window.History;
if ( !History.enabled ) {
return false;
}
/* Store the initial content*/
History.replaceState({
content: $('#main').html()
}, document.title, document.location.href);
/* Bind to StateChange …Run Code Online (Sandbox Code Playgroud)