我熟悉html5历史记录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?? */
});
这是我的“整体”代码......
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 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
//console.log(State);
//History.log(State.data, State.title, State.url);
console.log(history.length);
});
/* triggers */
$(document).on('click','a',function(e){
e.preventDefault();
var href = $(this).attr('href');
var title = $(this).text();
if(href == '#')
href = title;
$.get('portfolio.html',function(data, response){
var html = $(data).find('#main-content').html();
//console.log(html);
$('#ajax-load').html(html);
History.pushState({ content: html}, title, href);
$('#ajax-load').css({ position:'absolute',
right: -$(window).width(),
top: the.header.height(),
width: $(window).width(),
zIndex:999
}).animate({ right: 0 },300,function(){
console.log($('#main-content').length);
console.log($('#ajax-load').length);
$('#main-content').html(html);
$('#ajax-load').html('');
});
});
});
因为我实际检查历史记录的唯一原因是NEXT / BACK按钮,对吧?否则锚点href规则
- 编辑 -
基本上我需要从这里开始的条件
History.Adapter.bind(window,'statechange',function(){
var State = History.getState();
var condition = false;
if(condition){
console.log('You clicked the next/back button');
}
});
提前致谢
答案 0 :(得分:2)
您可以跟踪数组中的所有状态(链接),并在popstate
(或statechange
)上将新位置与数组中的旧位置进行比较,以便您知道用户的方式进入了历史(后退或前进)。
或者你可以在state obj
(pushState的第一个参数)中传递一个时间戳并将其与旧的
选项1 (有问题 - 请勿使用)
(function(){
/*adding some init vars*/
var the = this, arr = [], currPage;
var History = window.History;
if ( !History.enabled ) {
return false;
}
/* Store the initial content*/
History.replaceState({
content: $('#main').html()
}, document.title, document.location.href);
/* add to arr*/
arr[arr.length] = document.location.href;
/*keep track of where we arein arr*/
currPage = arr.length -1;
/* Bind to StateChange Event */
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
var position, button;
var State = History.getState(); // Note: We are using History.getState() instead of event.state
//console.log(State);
//History.log(State.data, State.title, State.url);
console.log(history.length);
position = arr.indexOf(document.location.href);
button = position > currPage ? "fwd" : "back";
currPage = position;
console.log("You pressed The "+ button + " Button");
});
/* triggers */
$(document).on('click','a',function(e){
e.preventDefault();
var href = $(this).attr('href');
var title = $(this).text();
if(href == '#')
href = title;
$.get('portfolio.html',function(data, response){
var html = $(data).find('#main-content').html();
//console.log(html);
$('#ajax-load').html(html);
History.pushState({ content: html}, title, href);
/* add to arr */
arr[arr.length] = href;
/* keep track */
currPage = arr.length -1;
$('#ajax-load').css({ position:'absolute',
right: -$(window).width(),
top: the.header.height(),
width: $(window).width(),
zIndex:999
}).animate({ right: 0 },300,function(){
console.log($('#main-content').length);
console.log($('#ajax-load').length);
$('#main-content').html(html);
$('#ajax-load').html('');
});
});
});
}())
此选项存在一个问题,即如果历史记录中的相同链接不止一次会被混淆
选项2
(function(){
/*adding some init vars*/
var the = this, currPageTime;
var History = window.History;
if ( !History.enabled ) {
return false;
}
/* Store the initial content*/
/* remember the current time */
currPageTime = new Date().getTime();
History.replaceState({
content: $('#main').html(),
time : currPageTime
}, document.title, document.location.href);
/* Bind to StateChange Event */
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
var pageTime, button;
var State = History.getState(); // Note: We are using History.getState() instead of event.state
//console.log(State);
//History.log(State.data, State.title, State.url);
console.log(history.length);
/*NOTE: I never used getState so i dont know if State.time will exist, if not change it to whatever holds the time we passed earlier */
pageTime = State.time;
button = pageTime > currPageTime ? "fwd" : "back";
currPageTime = pageTime;
console.log("You pressed The "+ button + " Button");
});
/* triggers */
$(document).on('click','a',function(e){
e.preventDefault();
var href = $(this).attr('href');
var title = $(this).text();
if(href == '#')
href = title;
$.get('portfolio.html',function(data, response){
var html = $(data).find('#main-content').html();
//console.log(html);
$('#ajax-load').html(html);
/* keep track of time */
currPageTime = new Date().getTime();
History.pushState({ content: html, time: currPageTime}, title, href);
$('#ajax-load').css({ position:'absolute',
right: -$(window).width(),
top: the.header.height(),
width: $(window).width(),
zIndex:999
}).animate({ right: 0 },300,function(){
console.log($('#main-content').length);
console.log($('#ajax-load').length);
$('#main-content').html(html);
$('#ajax-load').html('');
});
});
});
}())
PS:我没有测试它是否有效,如果它不起作用请做一个小提琴,我试着解决它
答案 1 :(得分:1)
您无需专门查看是否触发了下一个或后一个按钮。 'statechange'是按下下一个或后退按钮时将触发的事件。因此,根据网址更改,您可以操纵您的HTML内容。
此外,statechange也会在不同的场合在不同的浏览器中触发。 例如,Chrome会在任何页面加载时加载statechange事件,即使在刷新时也是如此,而firefox则不然。