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

Question

编辑3:这个jsFiddle与插件一起使用，我几乎拥有它。

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

<小时/>

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

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

       /       /page2       /page3       /article7       /page3       /page4

请注意，在此导航中，没有按下浏览器按钮，当退出article7时，网站将返回到其先前的网址，在本例中为page3。

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

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

if (new_url == penultimate_value_in_array) => Back button pressed (errase last value from array)
else => Forward button pressed (add new value to array)

这对于这种导航来说是正确的:

       /       /page2       /page3       /page4

就我而言，它非常适合“后退”按钮。但是，如果用户按“前进”从/article7 到/page3，该函数会将其读取为“后退”。这是一个例子来理解我的意思:

<小时/>

用户位于/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

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

       /       /page2       /page3       /article7

用户位于/page3 并按 Back -> new_page=/page2 ，等于 penultimate_page_in_array(/page2) => BACK

       /       /page2       /page3

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

       /       /page2

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

       /       /page2       /page3

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

       /       /page2       /page3       /article7

我如何引入另一个语句来确定 False 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');

    }

});

Answer 1

我能想到的最快、最简单的解决方案如下:

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

visited_pages_array[visited_pages_array.length-2] == newPage

针对您的情况，我会推荐两件事:

1. 请勿删除您刚刚从 visited_pa​​ges_array 中留下的地址，如下所示:

   visited_pa​​ges_array.splice(visited_pa​​ges_array.length-1, 1);

   这样visited_pa​​ges_array将保留所有访问过的页面的列表。

2. 创建一个名为 current_page_index 的新“全局”变量，该变量将在 visited_pa​​ges_array 中保存当前页面的索引，该变量现在可以保存 visited_pa​​ges_array.length -1(如果您当前位于最后访问的页面)或更低的值(如果您使用后退按钮)。

现在您所要做的就是改变您的状况:

if (visited_pages_array[visited_pages_array.length-2] == newPage)

至:

if (visited_pages_array[current_page_index-1] == newPage)

注释:

1. 当您检测到后退点击时，执行以下操作:current_page_index--;，当您检测到前进时，执行以下操作:current_page_index++ ;
2. 当用户点击导航栏移动另一个页面时，务必执行以下操作:visited_pa​​ges_array.splice(current_page_index+1 ,visited_pa​​ges_array.length-current_page_index-1); (删除所有保存的 Forward)，然后将新地址推送到 visited_pa​​ges_array 的末尾。当然还有设置 current_page_index++;

我希望这足够清楚，我无法让你的 jsFiddle 工作，所以我可以清楚地解释。 GL:)

编辑:取自 jQuery Address 文档的另一个想法:(不过不确定这个)

$.address.externalChange(fn): Binds a function to be executed when the address is changed from the browser usually when entering the page or using the back and forward buttons. The function receives a single event object parameter that contains the following properties: value, path, pathNames, parameterNames, parameters and queryString.

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

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