历史API HTML5，怎么知道什么时候用户下次/后退浏览器按钮点击？ [英] History API html5, how to know when user clicked in next/back browser buttons?
本文介绍了历史API HTML5，怎么知道什么时候用户下次/后退浏览器按钮点击？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我越来越熟悉HTML5 API历史，但我使用 history.js 扩展兼容性，
我有一个问题，那就是，我怎么能知道：
History.Adapter.bind（窗口，'statechange'，函数（）{//注意：我们正在使用statechange代替popstate的
无功状态= History.getState（）; //注意：我们正在使用History.getState（）而不是event.state
/ *这里的条件要知道，如果这种变化是一个背部或下一个按钮，而至极1？ * /
}）;
这是我的整体code ...
VAR的=这一点;
VAR记录= window.history的;
如果（！History.enabled）{
返回false;
}
/ *存储的初始内容* /
History.replaceState（{
内容：$（'＃主）HTML（）
}，document.title时，document.location.href）;
/ *绑定到stateChange事件* /
History.Adapter.bind（窗口'statechange'，函数（）{//注意：我们正在使用statechange代替popstate的
无功状态= History.getState（）; //注意：我们正在使用History.getState（）而不是event.state
//console.log(State）;
//History.log(State.data，State.title，State.url）;
的console.log（history.length）;
}）;
/ * *触发/
$（文件）。在（'点击'，'A'，函数（E）{
亦即preventDefault（）;
VAR HREF = $（本）.attr（'href属性）;
VAR标题= $（本）的.text（）;
如果（HREF =='＃'）
HREF =称号;
$获得（'portfolio.html'功能（数据，响应）{
。VAR HTML = $（数据）.find（'＃主要内容）HTML（）;
//console.log(html）;
$（'＃Ajax的负载'）HTML（HTML）;
History.pushState（{内容：HTML}，标题，HREF）;
$（'＃Ajax的负载'）的CSS（{位置：绝对，
右： - $（窗口）.WIDTH（）
顶部：the.header.height（）
宽度：$（窗口）.WIDTH（）
zIndex的：999
}）动画（{右：0}，300，函数（）{
的console.log（$（'＃主要内容）的长度。）;
的console.log（$（'＃Ajax的负载'）的长度。）;
$（'＃主要内容）HTML（HTML）;
$（'＃Ajax的负载'）HTML（''）。
}）; }）; }）;
由于我实际上应该检查历史上唯一的原因就是在NEXT / BACK按钮，对不对？否则锚HREF规则
- 编辑 -
基本上我所需要的条件从这里
History.Adapter.bind（窗口，'statechange'，函数（）{
无功状态= History.getState（）;
VAR条件= FALSE;
如果（条件）{
的console.log（'你点击下一个/后退按钮'）;
}
}）;
在此先感谢
解决方案
您可以在阵列和 popstate 跟踪所有国家（链接）（或 statechange ）比较新的位置，以旧的阵列中，所以你就会知道用户在历史朝哪个方向走（背面或FWD）。
或者你也可以在状态一起传递OBJ （第一个参数去pushState的）时间戳和比较旧
选项1 （有问题 - 不使用）
（函数（）{
/ *添加一些初始化瓦尔* /
VAR的=此，编曲= []，currPage;
VAR记录= window.history的;
如果（！History.enabled）{
返回false;
}
/ *存储的初始内容* /
History.replaceState（{
内容：$（'＃主）HTML（）
}，document.title时，document.location.href）;
/ *添加到常用3 * /
ARR [arr.length] = document.location.href;
/ *跟踪我们改编arein * /
currPage = arr.length -1;
/ *绑定到stateChange事件* /
History.Adapter.bind（窗口'statechange'，函数（）{//注意：我们正在使用statechange代替popstate的
VAR位置，按钮;
无功状态= History.getState（）; //注意：我们正在使用History.getState（）而不是event.state
//console.log(State）;
//History.log(State.data，State.title，State.url）;
的console.log（history.length）;
位置= arr.indexOf（document.location.href）;
按钮=位置＆GT; currPage？ FWD：背;
currPage =位置;
的console.log（你pressed的+按键+按钮）;
}）;
/ * *触发/
$（文件）。在（'点击'，'A'，函数（E）{
亦即preventDefault（）;
VAR HREF = $（本）.attr（'href属性）;
VAR标题= $（本）的.text（）;
如果（HREF =='＃'）
HREF =称号;
$获得（'portfolio.html'功能（数据，响应）{
。VAR HTML = $（数据）.find（'＃主要内容）HTML（）;
//console.log(html）;
$（'＃Ajax的负载'）HTML（HTML）;
History.pushState（{内容：HTML}，标题，HREF）;
/ *添加到常用3 * /
ARR [arr.length] = HREF;
/ *跟踪* /
currPage = arr.length -1;
$（'＃Ajax的负载'）的CSS（{位置：绝对，
右： - $（窗口）.WIDTH（）
顶部：the.header.height（）
宽度：$（窗口）.WIDTH（）
zIndex的：999
}）动画（{右：0}，300，函数（）{
的console.log（$（'＃主要内容）的长度。）;
的console.log（$（'＃Ajax的负载'）的长度。）;
$（'＃主要内容）HTML（HTML）;
$（'＃Ajax的负载'）HTML（''）。
}）; }）; }）;}（））
此选项有一个问题，它会感到困惑，如果相同的链接将在历史上不止一次的
选项2
（函数（）{
/ *添加一些初始化瓦尔* /
VAR的=这一点，currPageTime;
VAR记录= window.history的;
如果（！History.enabled）{
返回false;
}
/ *存储的初始内容* /
/ *记住当前时间* /
currPageTime =新的日期（）的getTime（）。
History.replaceState（{
内容：$（'＃主）HTML（）
时间：currPageTime
}，document.title时，document.location.href）;
/ *绑定到stateChange事件* /
History.Adapter.bind（窗口'statechange'，函数（）{//注意：我们正在使用statechange代替popstate的
VAR页次，按钮;
无功状态= History.getState（）; //注意：我们正在使用History.getState（）而不是event.state
//console.log(State）;
//History.log(State.data，State.title，State.url）;
的console.log（history.length）;
/ *注意：我从来没有使用过的getState所以我不知道如果State.time会存在，如果不将其更改为任何包含我们前面所经过的时间* /
页次= State.time;
按钮=页次＆GT; currPageTime？ FWD：背;
currPageTime =页次;
的console.log（你pressed的+按键+按钮）;
}）;
/ * *触发/
$（文件）。在（'点击'，'A'，函数（E）{
亦即preventDefault（）;
VAR HREF = $（本）.attr（'href属性）;
VAR标题= $（本）的.text（）;
如果（HREF =='＃'）
HREF =称号;
$获得（'portfolio.html'功能（数据，响应）{
。VAR HTML = $（数据）.find（'＃主要内容）HTML（）;
//console.log(html）;
$（'＃Ajax的负载'）HTML（HTML）;
/ *记录时间* /
currPageTime =新的日期（）的getTime（）。
History.pushState（{内容：HTML，时间：currPageTime}，标题，HREF）;
$（'＃Ajax的负载'）的CSS（{位置：绝对，
右： - $（窗口）.WIDTH（）
顶部：the.header.height（）
宽度：$（窗口）.WIDTH（）
zIndex的：999
}）动画（{右：0}，300，函数（）{
的console.log（$（'＃主要内容）的长度。）;
的console.log（$（'＃Ajax的负载'）的长度。）;
$（'＃主要内容）HTML（HTML）;
$（'＃Ajax的负载'）HTML（''）。
}）; }）; }）;}（））
PS：如果它工作，如果它不能正常工作，请做一个小提琴和I'l尝试修复它，我没有测试
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('');
});
});
});
Because the only reason I should actually check for the history is for the NEXT/BACK button, right? otherwise the anchor href rules
-EDIT-
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');
}
});
Thanks in advance
解决方案
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).
Or you can pass along in the state obj (the first param to pushState) a time stamp and compare that to the old
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('');
});
});
});
}())
This option has a problem that it will get confused if the same link will be in the history more than once
Option 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: I haven't tested if it works, if it doesn't work please make a fiddle and I'l try to fix it
这篇关于历史API HTML5，怎么知道什么时候用户下次/后退浏览器按钮点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
