编辑3 : 这个jsFiddle适用于插件,我几乎拥有它。
编辑2 :我制作了fiddle。我无法让插件在那里工作,但也许更容易分析。
在我正在构建的网页中,通过Ajax加载文章(帖子)和新页面。在加载新的Ajax内容的同时,地址栏会发生变化(使用jQuery Address plugin)。
所以正常导航会像这样:
/ /第2页/第3页/第七条/第3页/第4页
请注意,在此导航栏中,没有按下任何浏览器按钮,退出第7条后,网站会回到之前的网址第3页。< / p>
插件无法检测到用户何时按下后退或前进按钮。我设法找出了一种方法来了解用户何时按下后退或前进按钮:
每次添加新内容并更改地址时,我都会将新地址存储在数组中。如果用户按下后退或前进按钮,我会这样分析:
if(new_url == penultimate_value_in_array)=&gt;按下后退按钮(错误 来自数组的最后一个值)
else =&gt;按下前进按钮(向数组添加新值)
这适用于此类导航:
/ /第2页/第3页/第4页
在我的情况下,它适用于后退按钮。但是,如果用户从/ article7按下Forward到/ page3,该函数会将其读作Back。这是一个了解我的意思的例子:
用户位于/ page4并按Back - &gt; new_page = / page3等于penultimate_page_in_array(/ page3)=&gt; BACK
/ /第2页/第3页/第七条/第3页/第4页
用户位于/ page3并按Back - &gt; new_page = / article7等于penultimate_page_in_array(/ article7)=&gt; BACK
/ /第2页/第3页/第七条/ PAGE3
用户在/ article7中并按回 - &gt; new_page = / page3等于penultimate_page_in_array(/ page3)=&gt; BACK
/ /第2页/第3页/第七条
用户位于/ page3并按Back - &gt; new_page = / page2等于penultimate_page_in_array(/ page2)=&gt; BACK
/ /第2页/第3页
用户位于/ page2并按下转发 - &gt; new_page = / page3不等于penultimate_page_in_array(/)=&gt; FORWARD
/ /第2页
用户位于/ page3并按下转发 - &gt; new_page = / article7不等于penultimate_page_in_array(/ page2)=&gt; FORWARD
/ /第2页/第3页
用户位于/ article7并按下转发 - &gt; new_page = / page3,其等于penultimate_page_in_array(/ page3)=&gt;返回(,此处值应为FORWARD )
/ /第2页/第3页/第七条
如何引入另一个确定False Back应该转发的声明?
修改
这是我正在使用的代码,我不确定它是否有助于解决问题,但现在是:
var site_url = 'www.mysite.com',
last_visited_url = '',
just_visited_url = $.address.baseURL().replace(site_url,''),
visited_pages_array = [just_visited_url],
page_number = '';
访问新页面时: ajax调用,然后:
last_visited_url = just_visited_url;
page_number = $('a.next_page_link').attr('href').replace(site_url,''); // /page3 for example
$.address.state(site_url).value(page_number);
just_visited_url = page_number;
visited_pages_array.push(just_visited_url);
加载文章时: ajax调用,然后:
article_url = $('a.article_title').attr('href').replace(site_url,''); // /article7 for example
last_visited_url = just_visited_url;
$.address.state(site_url).value(article_url);
just_visited_url = article_url;
visited_pages_array.push(just_visited_url);
当存在文章时:
last_visited_url = just_visited_url;
$.address.state(site_url).value(page_number); // This page number is the last page_number value
just_visited_url = page_number;
visited_pages_array.push(just_visited_url);
当用户按下某些浏览器时,执行此代码:
$.address.externalChange(function() {
var newPage = $.address.baseURL().replace(site_url,'');
if (visited_pages_array[visited_pages_array.length-2] == newPage) {
visited_pages_array.splice(visited_pages_array.length-1 , 1);
console.log('BACK pressed');
} else if (visited_pages_array.length > 1) {
visited_pages_array.push(newPage);
console.log('FORWARD pressed');
} else {
console.log('REFRESH pressed');
}
});
答案 0 :(得分:3)
我能想到的最快最简单的解决方案如下:
您的问题是,当您的“下一页”和“上一页”相同时,代码会将Forward
视为Back
,因为以下条件为true
:< / p>
visited_pages_array[visited_pages_array.length-2] == newPage
我建议你做两件事:
请勿删除您刚从visited_pages_array
留下的地址,如下所示:
visited_pages_array.splice(visited_pages_array.length-1 , 1);
那样visited_pages_array
将保留所有访问过的网页的列表。
创建一个名为current_page_index
的新“全局”变量,该变量将保存当前页面的索引visited_pages_array
如果您当前位于最后一个visited_pages_array.length-1
页面访问或更低值如果您使用了Back
按钮。
现在你所要做的就是改变你的状况:
if (visited_pages_array[visited_pages_array.length-2] == newPage)
为:
if (visited_pages_array[current_page_index-1] == newPage)
备注:强>
Back
点击时 - 请执行以下操作:current_page_index--;
并在检测到Forward
时执行:current_page_index++;
visited_pages_array.splice(current_page_index+1 ,visited_pages_array.length-current_page_index-1);
(删除所有已保存的Forward
),然后再将新地址推送到visited_pages_array
的结尾。当然设置current_page_index++;
我希望这很清楚,我无法让你的jsFiddle工作,所以尽可能清楚地解释。 GL :)
编辑:来自jQuery Address
文档的另一个想法:(虽然不确定这个)
$。address.externalChange(fn):绑定要执行的函数 通常在进入页面时从浏览器更改地址或 使用后退和前进按钮。 该功能收到一个 事件对象参数,包含以下属性:value, path,pathNames,parameterNames,parameters和queryString。
这意味着你的函数可以接收一个事件对象 - 尝试alert()
所有它的属性也许答案就在那里
$.address.externalChange(function(ev){
// loop and alert ev's properties
for (var p in ev) {
alert(p + ': ' + ev[p]);
}
})
答案 1 :(得分:1)
我不完全确定你的逻辑,但是你所描述的内容听起来像是html5 pushState(浏览器历史状态操作)功能的完美候选者。以下是一些很好的总结:
此外,这里有一些来自stackoverflow用户的好演示: