jQuery地址：validation用户是按前进按钮而不是后退按钮

编辑3 ：这个jsFiddle适用于插件，我几乎拥有它。

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

---

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

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

/ / page2 / page3 / article7 / page3 / page4

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

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

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

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

这适用于这种导航：

/ / page2 / page3 / page4

在我的情况下，它适用于后退按钮。 但是，如果用户按下从/ article7转发到/ 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）=> BACK

/ / 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

我能想到的最快，最简单的解决方案如下：

您的问题是，当您的“下一页”和“上一页”相同时，您的代码会将“ 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该变量现在可以保留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 do： current_page_index++;
2. 当用户单击您的导航以移动另一页时，请visited_pages_array.splice(current_page_index+1 ,visited_pages_array.length-current_page_index-1);执行： visited_pages_array.splice(current_page_index+1 ,visited_pages_array.length-current_page_index-1); （在删除所有已保存的Forward s之前）将新地址推送到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]); } }) 

Answer 2

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

• 参考1
• 参考2

此外，这里有一些来自stackoverflow用户的好演示：

HTML5历史API演示