History API html5，如何知道用户何时点击了下一个/后退浏览器按钮? [英] History API html5, how to know when user clicked in next/back browser buttons?
本文介绍了History API html5，如何知道用户何时点击了下一个/后退浏览器按钮?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我对 html5 History API 越来越熟悉，但我正在使用 history.js 来扩展兼容性，
I am getting familiar with the html5 History API, but I am using history.js to extend the compatibility,
我有一个问题，就是我怎么知道:
I have one question and it's that, how can I know in:
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?? */
});
这是我的全部"代码...
This is my "whole" code...
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规则
Because the only reason I should actually check for the history is for the NEXT/BACK button, right? otherwise the anchor href rules
-编辑-
基本上我需要这里的条件
basically i need the condition from here
History.Adapter.bind(window,'statechange',function(){
var State = History.getState();
var condition = false;
if(condition){
console.log('You clicked the next/back button');
}
});
提前致谢
推荐答案
您可以跟踪数组中和 popstate(或 statechange)上的所有状态(链接)) 将新位置与数组中的旧位置进行比较，这样您就可以知道用户在历史记录中走了哪条路(向后或向前).
You can keep track of all states (links) in an Array and on popstate (or statechange) compare the new location to the old one in the array so you will know which way the user went in history (back or fwd).
或者您可以在 state obj(pushState 的第一个参数)中传递一个时间戳并将其与旧的进行比较
Or you can pass along in the state obj (the first param to pushState) a time stamp and compare that to the old
选项 1(有问题 - 请勿使用)
Option 1(has issues - don't use)
(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:我还没有测试它是否有效，如果它不起作用，请制作小提琴，我会尝试修复它
PS: I haven't tested if it works, if it doesn't work please make a fiddle and I'l try to fix it
这篇关于History API html5，如何知道用户何时点击了下一个/后退浏览器按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
