javascript - 如何从外部网页导航回使用pushState创建的伪 url?

  显示原文与译文双语对照的内容
76 5

below 解释告诉我,即使你推向历史记录的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,,然后单击 back 。 此时,URL栏将显示.. .mozilla.org/bar.html,,页面将获取popstate事件,它的状态对象包含stateObj的副本。 页面本身看起来像 foo.html,,虽然页面可能在popstate事件中修改它的内容。

如果再次单击 back,URL将变为.. .mozilla.org/foo.html,,文档将得到另一个popstate事件,这一次是一个空状态对象。 在这里,返回不会改变文档中的内容,尽管文档可以能在接收popstate事件时手动更新内容。

我在MVC项目中创建了一个测试页面,它仅仅将按钮点击与 上面 示例中 2行的javascript关联起来。 如预期,单击按钮会将浏览器位置从localhost更改为 localhost/bar 。html,并且后退和前进按钮按预期方式工作。 但是,如果我导航到谷歌并按下后退按钮,我会得到 404个服务器错误。 我是否误解了文档? 如何在不创建实际'bar.html'的情况下,从外部源工作,如何ammend的代码。

时间: 原作者:

147 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变量中保存足够的信息,这样我就可以根据需要设置页面。

在创建"单页网页应用程序"时,pushstate和popstate在html5移动开发中非常有用。 这是我使用它的方式,它工作得很好。

原作者:
...