jQuery地址:验证用户是按前进按钮而不是后退按钮

时间:2013-05-29 07:34:08

标签: jquery ajax browser-history jquery-address

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

编辑2 :我制作了fiddle。我无法让插件在那里工作,但也许更容易分析。


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

所以正常导航会像这样:

  

/ /第2页/第3页/第七条/第3页/第4页

请注意,在此导航栏中,没有按下任何浏览器按钮,退出第7条后,网站会回到之前的网址第3页。< / p>

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

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

  

if(new_url == penultimate_value_in_array)=&gt;按下后退按钮(错误   来自数组的最后一个值)
else =&gt;按下前进按钮(向数组添加新值)

这适用于此类导航:

  

/ /第2页/第3页/第4页

在我的情况下,它适用于后退按钮。但是,如果用户从/ article7按下Forward到/ page3,该函数会将其读作Back。这是一个了解我的意思的例子:


用户位于/ page4并按Back - &gt; new_page = / page3等于penultimate_page_in_array(/ page3)=&gt; BACK

  

/ /第2页/第3页/第七条/第3页/第4页

用户位于/ page3并按Back - &gt; new_page = / article7等于penultimate_page_in_array(/ article7)=&gt; BACK

  

/ /第2页/第3页/第七条/ PAGE3

用户在/ article7中并按回 - &gt; new_page = / page3等于penultimate_page_in_array(/ page3)=&gt; BACK

  

/ /第2页/第3页/第七条

用户位于/ page3并按Back - &gt; new_page = / page2等于penultimate_page_in_array(/ page2)=&gt; BACK

  

/ /第2页/第3页

用户位于/ page2并按下转发 - &gt; new_page = / page3不等于penultimate_page_in_array(/)=&gt; FORWARD

  

/ /第2页

用户位于/ page3并按下转发 - &gt; new_page = / article7不等于penultimate_page_in_array(/ page2)=&gt; FORWARD

  

/ /第2页/第3页

用户位于/ article7并按下转发 - &gt; new_page = / page3,其等于penultimate_page_in_array(/ page3)=&gt;返回(,此处值应为FORWARD

  

/ /第2页/第3页/第七条

如何引入另一个确定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);

加载文章时: 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');

    }

});

2 个答案:

答案 0 :(得分:3)

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

您的问题是,当您的“下一页”和“上一页”相同时,代码会将Forward视为Back,因为以下条件为true:< / p>

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按钮。

  3. 现在你所要做的就是改变你的状况:

    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. 当用户点击导航以移动另一个页面时,确定执行:visited_pages_array.splice(current_page_index+1 ,visited_pages_array.length-current_page_index-1);(删除所有已保存的Forward),然后再将新地址推送到visited_pages_array的结尾。当然设置current_page_index++;
    3. 我希望这很清楚,我无法让你的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]);
          }
      })
      

答案 1 :(得分:1)

我不完全确定你的逻辑,但是你所描述的内容听起来像是html5 pushState(浏览器历史状态操作)功能的完美候选者。以下是一些很好的总结:

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

HTML5 History API Demo