6

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

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

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

所以一个正常的导航会是这样的：

       //page2 /page3 /article7 /page3 /page4

请注意，在此导航中，没有按下浏览器按钮，当退出文章 7 时，网站会返回到其先前的 url，在这种情况下是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

       //第2页/第3页

用户在 /page2 并按下 Forward -> new_page=/page3 不等于 penultimate_page_in_array(/) => FORWARD

       / /第2页

用户在 /page3 并按下 Forward -> new_page=/article7 不等于 penultimate_page_in_array(/page2) => FORWARD

       //第2页/第3页

用户在 /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');

    }

});
4

2 回答 2

3

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

您的问题是，当您的“下一个”和“上一个”页面相同时，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-1Back

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

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);删除所有保存的 s） 。当然设置Forwardvisited_pages_arraycurrent_page_index++;

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

编辑：从jQuery Address文档中获取的另一个想法：（虽然不确定这个）

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

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

$.address.externalChange(function(ev){
    // loop and alert ev's properties
    for (var p in ev) {
        alert(p + ': ' + ev[p]);
    }
})
于 2013-06-07T01:19:54.343 回答
1

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

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

HTML5 历史 API 演示

于 2013-06-06T13:00:49.353 回答