Question

尝试了解历史API，下面的Mozilla说明向我建议，即使您推送到历史记录的网址在服务器上确实不存在，从外部源点击后退按钮也会返回原始页面pushState调用是：

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

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

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

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

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

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

Answer 1

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

（不可否认，我仍然对Mozilla文档感到有些困惑，该文档建议（至少对我来说）假冒伪劣路径应该有效。）

Answer 2

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移动开发中非常有用。这正是我使用它的方式，效果很好。

如何从外部网页导航回使用pushState创建的伪URL？

2 个答案: