Javascript 使用历史API区分按下的后退按钮和按下的前进按钮

我正在使用history API将一个新URL推送到web页面，而无需重新加载它。我有多个按钮，都有不同的功能

我的脚本现在几乎没有问题。当我按下按钮时，会发生一些事情，当我返回时，脚本会触发事件侦听器，而不会重新加载页面

但是，当我现在按下前进按钮时，我想前进。URL已正确更改为下一个URL，但事件侦听器仍会激发，就好像按下了后退按钮一样

例如：

index1.html

按键→

index2.html

按键→

index3.html

按下后退按钮→

index2.html

按下前进按钮→ URL现在是

index3.html

，但内容是

index1.html

我想这是因为我有一个监听器，它监听

popstate

，这发生在按下后退按钮和前进按钮时。我如何区分按下了哪种按钮

这是绑定侦听器的部分：

if (window.history && window.history.pushState) {
    $(window).unbind('popstate');
    $(window).bind('popstate', function (e) {
        clearOverlays();
        var url = URL
        $.ajax ( {
            url : url
        }).done ( function ( data ) {
            console.log(data);
        });
    });
}

---

下面是一种简化代码的方法：

您可以使用内置的

您不需要区分向前/向后。您应该使用

state

变量来存储用户导航到的状态。看起来您当前正在将其存储在一个全局变量中，

URL

？另外，在jQueryHi的现代版本中，您应该使用

打开

/

关闭

代替

绑定

/

解除绑定

，好的，我将绑定/解除绑定改为打开/关闭。好的，那么最好的方法是在popstate触发时获取URL，然后加载内容？在使用History API时，URL有点不相关。这只是为了让用户反馈，让他们知道他们在哪里。作为开发人员，您应该专注于传递给pushState的

state

变量：

history.pushState（**{status:“OpenFile”}**，“Open”，“interrelationurl.html”）讨论可能相关。可能重复