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

Posted

技术标签:

【中文标题】jQuery地址：证明用户正在按下前进按钮而不是后退按钮【英文标题】：jQuery Address: Certify that user is pressing forward button and not back button 【发布时间】：2013-05-24 08:47:59 【问题描述】：

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

    

);

【问题讨论】：

能否提供代码？ 我添加了代码，谢谢 我不确定我是否同意这个问题的编辑。我正在使用 jQuery Adress 插件，但我要求的不是完全关于插件的语句背后的逻辑。 你真正想做什么？ "插件未检测到用户何时按下后退或前进按钮。" => 使用后退按钮访问page3 url，使用前进按钮访问page3 url，以及通过在浏览器的地址栏中输入page3 url 有区别吗？跨度> 【参考方案1】：

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

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

visited_pages_array[visited_pages_array.length-2] == newPage

在你的情况下，我会推荐两件事：

    请勿从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++; 当用户点击你的导航移动另一个页面时，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]);
    
)

【讨论】：

current_page_index 初始值应该是1还是0？ current_page_index++;应该在visited_pa​​ges_array.splice(current_page_index+1,visited_pa​​ges_array.length-current_page_index-1);?之前解决 好的，我想我已经正确解决了，但是 False Back 仍然显示。我会尝试制作一个 jsFiddle。谢谢。 current_page_index初始值应为0。current_page_index++;应在visited_pages_array.splice(current_page_index+1 ,visited_pages_array.length-current_page_index-1);和visited_array_pages.push(...)之后结算 是的，我刚刚自己测试过.. 没有帮助。但是我发现了一个可以点击后退按钮单击事件的 javascript 类 - 尝试将其添加到您的代码中 - bajb.net/2010/02/browser-back-button-detection - 我已经对其进行了测试并且它正在工作。 我做了这个小提琴试图模仿我的情况，并且似乎有效。我现在很困惑：jsfiddle.net/fZ3pr/3【参考方案2】：

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

Reference 1 Reference 2

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

HTML5 History API Demo

【讨论】：

以上是关于jQuery地址：证明用户正在按下前进按钮而不是后退按钮的主要内容，如果未能解决你的问题，请参考以下文章

连续按下按钮时如何加快前进/后退过程

Jquery Blueimp 文件上传回调

Jquery 禁用浏览器的 后退和前进按钮

js可以获取到用户点击浏览器上前进和后退键的事件的吗？

用于控制 ajax 负载的后退和前进按钮

按下视图控制器后删除“返回”按钮