3

试图理解历史 API，下面的 Mozilla 解释向我建议，即使您推送到历史的 url 在服务器上并不真正存在，来自外部源的后退按钮单击将返回 pushState 调用的原始页面制作：

假设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 是否存在。

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

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

我在一个 MVC 项目中创建了一个测试页面，它实际上只是将按钮单击与上面示例中的 2 行 javascript 相关联。正如预期的那样，单击该按钮将浏览器位置从 localhost 更改为 localhost/bar.html，并且后退和前进按钮按预期工作。但是如果我然后导航到谷歌并按下后退按钮，我会收到 404 服务器错误。我误解了文档吗？以及如何修改代码以使来自外部源的后退按钮起作用，而无需创建实际的“bar.html”？

4

2 回答 2

2

如果其他人想知道同样的事情，我现在使用附加到我的真实 url 的查询字符串而不是不存在的路径来推送到历史记录。这实现了我想要的，即我可以推送状态，导航到外部页面，然后点击后退按钮并通过侦听 popstate 来检索状态。

（诚​​然，我仍然对 Mozilla 文档感到有些困惑，该文档确实建议（至少对我而言！）假路径应该可以工作。）

于 2013-09-26T14:12:38.710 回答
1

pushstate 是等式的一半......

你还需要监听 popstate：

window.addEventListener("popstate", function(e) {

    console.log(arguments)
    // read the arguments to figure out what state you need return to
    // change the page to however you need 

});

在上面添加这个函数并观察控制台。我所做的是在 js 变量中保存足够的信息，以便我可以根据需要设置页面。

当您创建“单页 Web 应用程序”时，pushstate 和 popstate 在 html5 移动开发中非常有用。这正是我使用它的方式，而且效果很好。

于 2013-09-23T12:56:55.757 回答