历史API html5，如何知道用户点击下一个/后一个浏览器按钮的时间？

我熟悉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?? */ }); 

这是我的“整体”代码……

 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'); } }); 

提前致谢

Answer 1

您可以跟踪数组中的所有状态（链接），并在popstate （或popstate ） popstate新位置与数组中的旧位置进行比较，这样您就可以知道用户在历史记录中的位置（后退或前进）。

或者你可以在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：我没有测试它是否有效，如果它不起作用请做一个小提琴，我试着解决它

Answer 2

您无需专门查看是否触发了下一个或后退按钮。 ‘statechange’是按下下一个或后退按钮时将触发的事件。 因此，根据url更改，您可以操纵您的HTML内容。

此外，状态转换在不同的场合以及不同的浏览器中触发。 例如，Chrome会在任何页面加载时加载statechange事件，即使在刷新时也是如此，而firefox则不然。