javascript - 单击后退和前进按钮时如何使用浏览器历史记录 api 调用函数？

Question

假设我有一个页面:http://www.example.com/foo.htm

我想放置一个按钮来显示页面的一部分并隐藏另一部分，例如:

HTML-

<p class="stepOne">Hi, I'm step one. <a id="doit" href="#">Go to Step 2</a></p>
<p class="stepTwo">And I'm step two</p>

JS-

$('#doit').on('click', function(){
    $('.stepOne').hide();
    $('.stepTwo').show();
});

我的问题是:用户单击“转到第 2 步”链接后，如何使用 HTML history api 在用户单击浏览器的后退按钮时隐藏第 2 步并显示第 1 步？

Answer 1

让我们把浏览器的历史想象成一个堆栈。每次单击链接或向前导航时，都会将项目插入堆栈。每当您想向后退时，浏览器都会从堆栈中“弹出”一个项目。让我们称这些项目中的每一个为“状态”。浏览器会保留一些关于每个状态的信息，如 URL、标题和“状态对象”(如果需要)。总之，当您前进时，新状态会被插入堆栈，而当您想要后退时，最新状态会从末尾弹出。

考虑到这一点，您想要完成的是手动将状态插入堆栈。通过这种方式，用户实际上并没有导航到任何地方——HTML5 History API 使我们能够在不更改页面的情况下推送/弹出/替换浏览器历史堆栈中的状态。

在您的click 事件监听器中，您需要添加一些代码以将新状态添加到历史堆栈。类似于:window.history.pushState({}, 'Step 2', '/step-2');

这将向历史堆栈添加一个新状态，您的 URL 将更改为 /step-2。现在，当您单击后退按钮时，它将从堆栈中弹出该状态并返回到之前的状态。两种状态都是相同的页面和 DOM。

现在，当用户在浏览器中导航 back 时，您必须考虑更改页面上这两个项目的可见性。这可以通过每次状态更改时在 window 上触发的 popstate 事件检测到。查看this plunkr example我拼起来的在点击事件监听器中，DOM 发生了变化(隐藏和显示项目)，一个新的历史状态被压入堆栈，其中一个整数表示应该在该历史状态中显示的步骤。然后，在 popstate 事件中，用户向后导航，在事件对象中，我们得到了弹出的状态。我们知道我们应该倒退，所以如果弹出的步骤是第 2 步，我们将要显示第 1 步。

我对 html 做了一些小改动，以便能够简洁地编写代码，这里有很大的模块化空间 — 无需在 javascript 中硬编码步骤编号。

这有意义吗？