jQuery的地址：证明用户是pressing前进按钮，而不是后退按钮 [英] jQuery Address: Certify that user is pressing forward button and not back button

查看：99
本文介绍了jQuery的地址：证明用户是pressing前进按钮，而不是后退按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

修改3 ： 这的jsfiddle 与插件工作，我几乎都有了。

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

在网页我建设，文章（帖子）和新的页面都通过Ajax加载。而此时新的Ajax内容加载的同时，在地址栏的改变（使用的jQuery插件地址）

因此​​，一个正常航行会是这样的：

  

       /       /page2       /page3       /article7       /page3       /page4

请注意，在这个导航，没有浏览器按钮是pressed，退出时的第七条的网站可以追溯到其先前的网址是第三页在这案例。

该插件不检测，当用户pressed后退或前进按钮。我设法想出一个办法知道当用户presses后退或前进按钮：

每个时间新的内容，并将该地址被改变我存储新地址在数组中。如果用户presses的back'or'forward按钮，我analise这种方式：

  

如果（new_url == penultimate_value_in_array）=> pssed后退按钮$ P $（errase   从数组最后一个值）
否则=>转发按钮pressed（添加新的价值数组）

这可以正确处理这种导航：

  

       /       /page2       /page3       /page4

在我的情况下，它的工作原理完美的后退按钮。但是，如果用户$ P $从/第七条psses转发到/第3页的功能将它读作后退。下面是一个例子就明白了我的意思：

用户在/ 4页和presses返回 - > new_page = /第3页，等于penultimate_page_in_array（/ 3页）=> BACK

  

       /       /page2       /page3       /article7       /page3       /page4

用户在/第3页和presses返回 - > new_page = /第七条等于penultimate_page_in_array（/第七条）=> BACK

  

       /       /page2       /page3       /article7       /page3

用户在/第七条和presses返回 - > new_page = /第3页，等于penultimate_page_in_array（/ 3页）=> BACK

  

       /       /page2       /page3       /article7

用户在/第3页和presses返回 - > new_page = / 2页等于penultimate_page_in_array（/ 2页）=> BACK

  

       /       /page2       /page3

用户在/ 2页和presses前进 - > new_page = /第3页即不等于penultimate_page_in_array（/）=>福

  

＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP; /＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP; / 2页

用户在/第3页和presses前进 - > new_page = /第七条即不等于penultimate_page_in_array（/ 2页）=>福

  

       /       /page2       /page3

用户在/第七条和presses前进 - > new_page = /第3页，等于penultimate_page_in_array（/ 3页）=> BACK（这里的值应该是FORWARD ）

  

       /       /page2       /page3       /article7

我如何能够引进另一份声明中，将确定假回应该是前进？

编辑：

这是在code，我使用，我不知道这是否会帮助解决的问题，但在这里它是：

  VAR SITE_URL ='www.mysite.com'，
    last_visited_url =''，
    just_visited_url = $ .address.baseURL（）代替（SITE_URL，''），
    visited_pa​​ges_array = [just_visited_url]
    PAGE_NUMBER ='';

访问新页面时： Ajax调用，则：

  last_visited_url = just_visited_url;
PAGE_NUMBER = $（'a.next_page_link'）ATTR（HREF）取代（SITE_URL，''）。。 // /第3页，例如
$ .address.state（SITE_URL）.value的（PAGE_NUMBER）;
just_visited_url = PAGE_NUMBER;
visited_pa​​ges_array.push（just_visited_url）;

加载文章时： Ajax调用，则：

  article_url = $（'a.article_title'）ATTR（HREF）取代（SITE_URL，''）。。 // /第七条为例
last_visited_url = just_visited_url;
$ .address.state（SITE_URL）.value的（article_url）;
just_visited_url = article_url;
visited_pa​​ges_array.push（just_visited_url）;

现有的文章时：

  last_visited_url = just_visited_url;
$ .address.state（SITE_URL）.value的（PAGE_NUMBER）; //此页号是最后PAGE_NUMBER值
just_visited_url = PAGE_NUMBER;
visited_pa​​ges_array.push（just_visited_url）;

而当用户presses一些浏览器butons这个code执行：

  $。address.externalChange（函数（）{

    。VAR NEWPAGE = $ .address.baseURL（）代替（SITE_URL，''）;

    如果（visited_pa​​ges_array [visited_pa​​ges_array.length-2] == NEWPAGE）{

        visited_pa​​ges_array.splice（visited_pa​​ges_array.length-1，1）;
        的console.log（'BACK pressed'）;

    }否则如果（visited_pa​​ges_array.length→1）{

        visited_pa​​ges_array.push（新页）;
        的console.log（'FORWARD pressed'）;

    } 其他 {

        的console.log（REFRESH pressed'）;

    }

}）;

解决方案

最快，最简单的解决方案，我能想到的是以下内容：

您的问题是，当你的下一个和previous的页面是一样的，pressing 转发是由您的code检测为返回，因为下列条件真：

  visited_pa​​ges_array [visited_pa​​ges_array.length-2] == NEWPAGE

我会建议你的情况两件事情：

  1. 不要删除刚刚从<$ ​​C $ C> 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 如果你目前正处于最后访问的页面或如果您使用较低的值 返回按钮。

现在你需要做的是改变你的条件：

 如果（visited_pa​​ges_array [visited_pa​​ges_array.length-2] ==新页）

到

 如果（visited_pa​​ges_array [current_page_index-1] ==新页）

注：

  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）; （删除所有保存的转发 S）推新地址，年底前 visited_pa​​ges_array 。而且ofcourse设置 current_page_index ++;

我希望这是不够清楚，我不能让你的jsfiddle工作，使解释清楚，我可以。 GL :)

编辑：从 jQuery的地址文档采取另一种思路：（不知道这一次虽然）

  

$ address.externalChange（FN）：绑定一个功能被执行时   地址是从浏览器中输入的页面通常当改变或   使用后退和前进按钮。 这个函数接收单   事件对象参数包含下列属性：值，   路径，路径名，parameterNames，参数和查询字符串。

这意味着你的函数可以接收事件对象 - 尝试警报（）荷兰国际集团所有它的属性也许答案会躺在那里

  $。address.externalChange（函数（EV）{
    //循环和警报电动汽车的性能
    为（在EV VAR P）{
        警报的（p +：+ EV [P]）;
    }
}）

EDIT 3: This jsFiddle works with the plugin, I almost have it.

EDIT 2: I made a fiddle.I can't get the plugin to work there, but maybe it is easier to analyze.

In the webpage I am building, Articles(posts) and new Pages are loaded via Ajax. At the same time when new Ajax-content is loaded, the address bar changes (using jQuery Address plugin).

So a normal navigation would go like this:

       /       /page2       /page3       /article7       /page3       /page4

Please note that in this navigation, no browser button was pressed, when exiting the article7 the website goes back to its prior url which is page3 in this case.

The plugin doesn't detect when the user pressed the back or forward button. I managed to figure out a way to know when the user presses back or forward button:

Each time new content is added and the address is changed I store the new address in an array. If the user presses the back'or'forward button I analise it this way:

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

This works correctly for this kind of navigation:

       /       /page2       /page3       /page4

In my case, it works perfect for the Back button. However if the user presses Forward from /article7 to /page3 the function will read it as Back. Here is an example to understand what I mean:

user is in /page4 and presses Back -> new_page=/page3 that is equal to penultimate_page_in_array(/page3) => BACK

       /       /page2       /page3       /article7       /page3       /page4

user is in /page3 and presses Back -> new_page=/article7 that is equal to penultimate_page_in_array(/article7) => BACK

       /       /page2       /page3       /article7       /page3

user is in /article7 and presses Back -> new_page=/page3 that is equal to penultimate_page_in_array(/page3) => BACK

       /       /page2       /page3       /article7

user is in /page3 and presses Back -> new_page=/page2 that is equal to penultimate_page_in_array(/page2) => BACK

       /       /page2       /page3

user is in /page2 and presses Forward -> new_page=/page3 that is NOT equal to penultimate_page_in_array(/) => FORWARD

       /       /page2

user is in /page3 and presses Forward -> new_page=/article7 that is NOT equal to penultimate_page_in_array(/page2) => FORWARD

       /       /page2       /page3

user is in /article7 and presses Forward -> new_page=/page3 that IS equal to penultimate_page_in_array(/page3) => BACK (and here the value should be FORWARD)

       /       /page2       /page3       /article7

How can I introduce another statement that would determine that False Back should be Forward?

EDIT:

This is the code I am using, I'm not sure if it will help to resolve the issue but here it is:

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 = '';

when visiting new page: ajax call,then:

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);

when loading Article: ajax call,then:

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);

when existing an Article:

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);

And this code is executed when the user presses some of the browser butons:

$.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');

    }

});

解决方案

The fastest and easiest solution I can think of is the following:

Your problem is that when your "next" and "previous" pages are the same, pressing Forward is detected by your code as Back because the following condition is true:

visited_pages_array[visited_pages_array.length-2] == newPage

I would recommend 2 things in your case:

  1. DO NOT delete the address you just left from visited_pages_array as in:

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

    that way visited_pages_array will keep a list of all visited pages.

  2. Create a new "global" variable called current_page_index that will hold the index of your current page in visited_pages_array which can now hold visited_pages_array.length-1 if you are currently at the last page visited or lower values if you used Back button.

Now all you have to do is change your condition from:

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

to:

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

Notes:

  1. When you detect a Back click - do this: current_page_index--; and when you detect a Forward do: current_page_index++;
  2. When the user clicks your navigation to move the another page, MAKE SURE to do: visited_pages_array.splice(current_page_index+1 ,visited_pages_array.length-current_page_index-1); (removing all the saved Forwards) before pushing the new address to the end of visited_pages_array. And ofcourse setting current_page_index++;

I hope this is clear enough, I couldn't get your jsFiddle to work so explained as clearly as I can. GL :)

EDIT: another idea taken from the jQuery Address docs: (not sure about this one though)

$.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.

which means your function can receive an event object - try alert()ing all it's properties maybe the answer will be lying there

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

这篇关于jQuery的地址：证明用户是pressing前进按钮，而不是后退按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆