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

Detecting back button triggers (using Ajaxify and History.js)

本文关键字：Ajaxify History js 使用 按钮 触发器 检测      更新时间：2023-09-26

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

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

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

我想做的是找出您是否可以检测到何时触发后退按钮？阅读规范，我认为使用.statechange可以工作，但每.statechange都会接受，而不是特定的后退按钮。

需要注意的几件事 - 与ajaxed内容一起滑出的面板称为.panel-slide'，当它打开时，它具有类.opened，当它关闭时.closed 。也许我们可以用它来帮助.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

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

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

由于前进按钮，

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

我会尽量完美地解释。

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

在某处你正在处理你的状态更改，检查是下一个页面是否为真，然后使用正常的动画。如果下一页为假，请使用更改后的动画。

动画完成后，再次将 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;
}

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

相关文章：