История API html5, как узнать, когда пользователь нажал кнопку next / back browser? [дубликат]
этот вопрос уже есть ответ здесь:
Я знакомлюсь с API истории html5, но я использую история.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 rules
-EDIT -
в основном мне нужно условие отсюда
History.Adapter.bind(window,'statechange',function(){
var State = History.getState();
var condition = false;
if(condition){
console.log('You clicked the next/back button');
}
});
спасибо заранее
2 ответов
вы можете отслеживать все состояния (ссылки) в массиве и на popstate (или statechange) сравните новое местоположение со старым в массиве, чтобы вы знали, каким образом пользователь вошел в историю (назад или fwd).
или вы можете передать в 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: Я не проверял, работает ли он, если он не работает, пожалуйста, сделайте скрипку, и я попытаюсь это исправить
вам не нужно будет специально видеть, срабатывает ли кнопка next или back. "statechange" - это событие, которое будет инициировано при нажатии кнопки next или back. Таким образом, на основе изменения url вы можете управлять содержимым html.
кроме того, statechange запускается в разных случаях, а также в разных браузерах. Chrome, например, загружает событие statechange при загрузке любой страницы, даже при обновлении, тогда как это не относится к firefox.