javascript - history.pushState - 不工作？

Question

我想在不重新加载的情况下更改 html。我喜欢这样做:

$('#left_menu_item').click(function(e) {
    if (!!(window.history && history.pushState)) {
        e.preventDefault();
        history.pushState(null, null, newUrl);
    }
});

它工作正常。但是如果我想用“后退”按钮返回 - 浏览器更改以前的 url，但它不会重新加载页面。为什么？

Answer 1

此行为是预期的并且符合 specifications操纵历史堆栈。

这是一个解释起来比较复杂的问题。但简而言之，可以这样想:用户在历史堆栈上推送的任何历史条目(使用 pushState 等)在您从它移动时都不值得页面加载，因为它被认为是伪造的(用户生成的)历史条目。

为什么？这种行为是一件好事，并且符合让开发人员更好地控制页面而不必被迫重新加载它的意图(把它想象成 ajax:你可以做以前只能通过页面重新加载才能实现的事情，比如获取数据，但是现在您可以使用 XMLHttpRequest 对象在不重新加载页面的情况下执行此操作)。如果您想模仿单击后退按钮时重新加载页面的行为。您可以简单地调用 location.reload() 当你处理 window.onpopstate 事件时

---

如何？这可能超出了您的问题范围，但我只是想把它放在那里来描述我们正在谈论的内容

让我用一个现有的例子来解释here (摘录的文字将斜体):

假设 http://mozilla.org/foo.html执行以下 JavaScript:

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

这将导致 URL 栏显示 http://mozilla.org/bar.html ，但不会导致浏览器加载 bar.html，甚至不会检查 bar.html 是否存在。

将其视为您在历史堆栈中创建一个与实际页面加载无关的条目.. 而不是“假”页面加载(即您只是使用 javascript 来操作 dom 并插入 html) ..

现在假设用户现在导航到 http://google.com ，然后点击返回。此时地址栏会显示http://mozilla.org/bar.html , 并且该页面将获得一个 popstate 事件，其状态对象包含一个 stateObj 的副本。该页面本身看起来像 foo.html，尽管该页面可能会在 popstate 事件期间修改其内容。

这里的要点是 bar.html 是位于原始 http://mozilla.org/foo.html 之上的虚假历史记录条目.. 所以你会在 url 上看到 http://mozilla.org/bar.html但内容将属于 ​​foo(在本例中，请注意，当我们推送 bar.html 时，我们没有操纵 dom 的内容。如果我们在您的示例中这样做了……那么该内容也会显示出来)。这里的关键是页面重新加载!.. 因为我们提供的页面在历史堆栈上有一个 genuin 条目(即使在 url.. 我们正在显示一个关联的 url在历史堆栈上有一个虚假的条目)。

还将此讨论与手动处理 popstate 事件的页面分开。那是另一回事，只会使事情复杂化。

如果我们再次点击返回，URL 将变为 http://mozilla.org/foo.html ，文档将获得另一个 popstate 事件，这次带有一个空状态对象。在这里，返回也不会更改文档的内容与上一步中的内容相同，尽管文档可能会在收到 popstate 事件后手动更新其内容。

这里..页面不会加载!..那是因为我们正在从一个虚假的历史堆栈条目转移到真实的(真实的已经在上一步中加载了) .. 所以页面重新加载就是这样)。

例子就是这样。这个概念有点难以解释，我鼓励您通过点击真实和虚假页面的组合来测试您的代码，您将看到页面何时实际加载和何时不加载的模式。