javascript - 检测后退按钮触发器(使用 Ajaxify 和 History.js)

Question

我正在使用Ajaxify ，它使用 History.js .

单击项目链接时，内容会通过 ajax 滑入，并且 URL 会发生更改。单击关闭按钮时，面板滑出并更新 url。简单。

但是，当我单击后退按钮而不是关闭按钮时，URL 会更新(可能由 History.js 正确触发)，但面板不会滑出。这是因为有单独的代码控制滑入/滑出。

我想要做的是找出您是否可以检测到后退按钮何时被触发？阅读规范后，我认为使用 .statechange 可以工作，但它会在每个 .statechange 上出现，而不是特别是后退按钮。

有几件事需要注意 - 带有 ajaxed 内容滑出的面板称为 .panel-slide'，当它打开时，它具有类 .opened 和当它关闭时.close。也许我们可以用它来帮助.statechange？

这是我的面板幻灯片代码

$(document).ready(function() {

$('.panel-slide').addClass('closed');

var e = $(window).width();

$('.panel-slide.closed').css('margin-left', e + 'px');

$(window).resize(function() {       
    var e = $(window).width();
    $('.panel-slide.closed').css('margin-left', e + 'px')
});

$('body').on('click', '.close-panel', function() {      
    $('.panel-slide').animate({marginLeft: e + 'px'}, 1e3, 'easeInOutCubic', function() {
        History.back();
    });
    $('.panel-slide').attr('class', 'panel-slide closed');
    $('ul li a').animate({
        opacity: 1
    }, 500, function() {});
});

$('ul li a').click(function() {
    $('.panel-slide').attr('class', 'panel-slide opened');
    $('ul li a').animate({
        opacity: 0
    }, 500, function() {});
});

});

我的整个修改过的ajaxify都在这里http://snippi.com/s/m0058ru

Answer 1

我遇到了同样的问题，在历史记录和点击链接之间没有检测到。 我修改了我的脚本并且它正在运行。

如果按下链接，我的脚本将使用函数 animateLeftToRight()； 如果按下后退/前进按钮，我的脚本将使用函数 animateRightToLeft();

这不是最好的解决方案，因为有前进按钮，但大多数访问者只使用后退按钮，而不使用前进按钮。

我会尽力解释得尽可能完美。

我添加了一个名为 nextPage 的变量，默认情况下该变量为 false。 单击链接时，此变量设置为 true。

在处理 stateChanges 的地方，检查 nextPage 是否为 true，然后使用普通动画。如果 nextPage 为 false，则使用更改后的动画。

动画结束后，再次将 nextPage 设置为 false。

var nextPage = false;

$('a').click(function(){
    nextPage = true;
    if(nextPage){
        animateRightToLeft();
    }
    else{
        animateLeftToRight();
    }
});

function animateLefToRight(){
    // animation stuff
    // after animation add:
    nextPage = false;
}

function animateRightoLeft(){
    // animation stuff
    // after animation add:
    nextPage = false;
}

我希望您有足够的信息来使用它并将其集成到您的脚本中。 我已经成功地使用了这个脚本，只是我的脚本太复杂，无法在此处显示，所以我简化了它。