jQuery地址: Certify that user is pressing forward button and not back button

编辑3 :
这个jsFiddle与插件一起工作，我差不多了。

编辑2 :我做了一个fiddle。我不能让插件在那儿工作，但是也许更容易分析。

在我正在构建的网页中，文章(帖子)和新页面是通过Ajax加载的。在加载新的Ajax内容的同时，地址栏也会更改(使用jQuery Address plugin)。

因此，正常的导航将如下所示:



请注意，在此导航中，没有按下浏览器按钮，当退出 article7 时，网站将返回其先前的URL，在这种情况下为 page3 。

该插件无法检测到用户何时按下“后退”或“前进”按钮。我设法找出一种方法来知道用户何时按下后退或前进按钮:

每次添加新内容并更改地址时，我都会将新地址存储在数组中。如果用户按下“后退”或“前进”按钮，我将通过以下方式对其进行分析:



对于这种导航，这是正确的:



就我而言，它非常适合“后退”按钮。但是，如果用户从/article7向/page3按下“前进”，则该功能会将其读取为“后退”。这是了解我的意思的示例:

用户位于/page4中，然后按Back-> new_page =/page3，它等于penultimate_page_in_array(/page3)=>返回



用户位于/page3中，然后按Back-> new_page =/article7，它等于penultimate_page_in_array(/article7)=>返回



用户位于/article7中，然后按Back-> new_page =/page3等于penultimate_page_in_array(/page3)=> BACK



用户位于/page3中，然后按Back-> new_page =/page2，它等于penultimate_page_in_array(/page2)=>返回



用户位于/page2中，然后按Forward-> new_page =/page3，该值不等于penultimate_page_in_array(/)=> FORWARD



用户位于/page3中，并按Forward-> new_page =/article7，该值不等于penultimate_page_in_array(/page2)=> FORWARD



用户位于/article7中，然后按Forward-> new_page =/page3等于penultimate_page_in_array(/page3)=> BACK(，此处的值应为FORWARD )



我该如何引入另一条语句来确定“虚假后退”应为“前进”？



编辑:

这是我正在使用的代码，我不确定它是否有助于解决问题，但这里是:

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

    }

});

最佳答案

我能想到的最快，最简单的解决方案是:

您的问题是，当您的“下一页”和“上一页”页面相同时，由于以下条件是Forward，因此您的代码将按Back的形式检测为true:

visited_pages_array[visited_pages_array.length-2] == newPage

在您的情况下，我将推荐2件事:

请勿从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文档中提取的另一种想法:(虽然不确定这一点)



这意味着您的函数可以接收一个事件对象-尝试alert()记录其所有属性，也许答案就在那里

$.address.externalChange(function(ev){
    // loop and alert ev's properties
    for (var p in ev) {
        alert(p + ': ' + ev[p]);
    }
})

关于jQuery地址: Certify that user is pressing forward button and not back button，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16808014/