jQuery地址:验证用户是按前进按钮而不是后退按钮

Question

编辑3:这个jsFiddle适用于插件,我几乎拥有它.

编辑2:我做了一个小提琴.我无法让插件在那里工作,但也许它更容易分析.

---

在我正在构建的网页中,通过Ajax加载文章(帖子)和新页面.在加载新的Ajax内容的同时,地址栏会发生变化(使用jQuery Address插件).

所以正常的导航会像这样:

       //page2/page3/article7/page3/page4

请注意,在此导航中,没有按下任何浏览器按钮,退出文章7时,网站返回到其先前的URL,在这种情况下是page3.

当用户按下后退或前进按钮时,插件不会检测到.我设法找出了一种方法来了解用户何时按下后退或前进按钮:

每次添加新内容并更改地址时,我都会将新地址存储在一个数组中.如果用户按下后退或前进按钮,我会这样分析:

if(new_url == penultimate_value_in_array)=>按下后退按钮(从数组中删除最后一个值)
else =>按下前进按钮(向数组添加新值)

这适用于这种导航:

       //page2/page3/page4

在我的情况下,它适用于后退按钮.但是,如果用户从/ article7按下Forward到/ page3,该函数会将其读作Back.这是一个了解我的意思的例子:

---

用户在/ page4并按Back - > new_page =/page3等于penultimate_page_in_array(/ page3)=> BACK

       //page2/page3/article7/page3/page4

用户在/ page3并按Back - > new_page =/article7等于penultimate_page_in_array(/ article7)=> BACK

       //page2/page3/article7/page3

user在/ article7中并按Back - > new_page =/page3等于penultimate_page_in_array(/ page3)=> BACK

       //page2/page3/article7

用户在/ page3中按Back - > new_page =/page2等于penultimate_page_in_array(/ page2)=>返回

       //page2/page3

user在/ page2中并按下Forward - > new_page =/page3,它不等于penultimate_page_in_array(/)=> FORWARD

       / /第2页

user在/ page3中并按下Forward - > new_page =/article7,它不等于penultimate_page_in_array(/ page2)=> FORWARD

       //page2/page3

user在/ article7中并按下Forward - > new_page =/page3,其等于penultimate_page_in_array(/ page3)=> BACK(这里的值应为FORWARD)

       //page2/page3/article7

如何引入另一个确定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);

当加载Article: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');

    }

});

Answer 1

我不完全确定你在这里的逻辑，但你所描述的听起来像是 html5 PushState（浏览器历史状态操作）功能的完美候选者。以下是一些很好的总结：

• 参考文献1
• 参考2

另外，这里还有来自其他 stackoverflow 用户的一些精彩演示：

HTML5 历史 API 演示