如何从外部网页导航回使用pushState创建的伪URL？-Java 学习之路

试图理解历史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事件，其状态对象包含stateObj的副本 . 页面本身看起来像foo.html，尽管页面可能会在popstate事件期间修改其内容 . 如果我们再次单击，则URL将更改为... mozilla.org/foo.html，文档将获得另一个popstate事件，这次使用null状态对象 . 在这里，尽管文档可能在收到popstate事件时手动更新其内容，但返回时不会更改文档内容与上一步中的内容 .

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

2 回答

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移动开发中非常有用 . 这正是我使用它的方式，而且效果很好 .
回复于 2024-05-02T21:13:03+08:00
2

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

（不可否认，我仍然对Mozilla文档感到有些困惑，该文档确实（至少对我来说）表明假路径应该有效 . ）

回复于 2024-05-02T21:13:03+08:00

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

2 回答

相关问题