jQuery地址：证明用户正在按下前进按钮而不是后退按钮

Question

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

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

---

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

所以正常的导航应该是这样的：

       /       /page2       /page3       /article7       /page3       /page4

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

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

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

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

这适用于这种导航：

       /       /page2       /page3       /page4

就我而言，它非常适合“后退”按钮。但是，如果用户从 /article7 到 /page3 按下 Forward，该函数会将其读取为 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

用户在 /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 并按下 Forward -> 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_pages_array中删除您刚刚留下的地址，如：

   visited_pages_array.splice(visited_pages_array.length-1 , 1);

   这样visited_pages_array 将保留所有访问页面的列表。

2. 创建一个名为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)

注意事项：

1. 当您检测到Back 单击时 - 执行此操作：current_page_index--;，当您检测到 Forward 时执行此操作：current_page_index++;
2. 当用户点击你的导航移动另一个页面时，MAKE SURE做：visited_pages_array.splice(current_page_index+1 ,visited_pages_array.length-current_page_index-1);（删除所有保存的Forwards），然后将新地址推到@末尾987654342@。当然设置current_page_index++;

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

编辑：另一个来自jQuery Address 文档的想法：（虽然不确定这个）

$.address.externalChange(fn)：绑定一个函数，当 通常在进入页面时从浏览器更改地址或 使用后退和前进按钮。 函数接收单个 事件对象参数，包含以下属性：值， 路径、路径名、参数名、参数和查询字符串。

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

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

Answer 2

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

• Reference 1
• Reference 2

另外，这里有一些来自其他 stackoverflow 用户的很好的演示：

HTML5 History API Demo