Question

我使用历史记录API将新网址推送到网页而不重新加载。我有多个按钮，它们都有不同的功能。

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

然而，当我现在按下前进按钮时，我想继续前进。 URL已正确更改为下一个，但事件侦听器仍然会像按下后退按钮一样触发

示例：

index1.html
按钮→index2.html
按钮→index3.html
按下后退按钮→index2.html
按下前进按钮→网址现在为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);
        });
    });
}

Answer 1

这是一种简化代码的方法：

您可以将内置<a>标签与嵌套<input>标签一起使用，以便在页面之间导航。 Window.open()将创建一个弹出窗口，而window.location.replace()将禁用历史记录API，但这两个都不会对您有帮助，因此嵌套的<input>标记（在<a>标记内部）是最合乎逻辑的解决方案。

关于区分按钮，您可以在每个按钮中使用HTML onclick属性来指定要执行的JS函数，在您的情况下为window.history.back()和window.history.forward()。

例如，您可以使用以下内容。

<!DOCTYPE html>
<!-- Example of code for your first page -->
<html lang="en">

<head>
  <!-- Metadata -->
</head>

<body>
  <h1>Page 1.html</h1>
  <!-- The <a> tag below is what transitions between pages. The <input> tag is just for the appearance of a button. -->
  <a href="yourlink.html"><input type="button" value="page2"></a>
  <!-- Input tags below are required, unless you want to use 'javascript:(function)' in an <a> tag -->
  <input type="button" onclick="window.history.back()" value="Go back">
  <input type="button" onclick="window.history.forward()" value="Go forward">
</body>

</html>

区分按下的后退按钮和使用History API按下的前进按钮

1 个答案: