javascript - 浏览器历史操作[关闭]答案

【问题标题】：javascript - browser history manipulating [closed]javascript - 浏览器历史操作[关闭]
【发布时间】：2019-03-20 16:11:20
【问题描述】：

我正在使用 JavaScript 加载页面，我想将加载的页面推送到历史记录中。
这意味着当点击返回按钮时，会加载推送的页面。

我不是在刷新页面，而是通过 JavaScript 加载它。

我已经尝试过history.pushState()，但是点击返回后，它没有返回任何东西。
推送历史和写入后可以使用一次：

window.onpopstate = function() {
    // do something
}

但是，我不能再使用它了。
可能是我误会了window.onpopstate...

【问题讨论】：

执行此操作的“简单”方法是在基本页面 url 之后使用哈希片段。这些将自动保存到历史记录中，并且不需要对后退按钮进行任何修改。然后您可以使用 onhashchange 事件通过 javascript 监听 url，从而加载正确的页面。
@Shilly 我没听明白，你能解释一下吗？
你能先澄清一下你在做什么吗？您有一个使用 javascript 更新的 HTML 页面？（单页应用程序）或者您有几个单独的 HTML 页面，您可以通过超链接导航？（基本的多页应用程序）我假设您有一个单页应用程序，因为您提到您没有刷新任何内容。
@Shilly 我有 1 个 php 文件，我正在 div 中加载其他文件

标签： javascript browser history back

【解决方案1】：

基本的单页应用程序（使用 javascript 加载页面，而不是使用多个单独的 html/php/asp/jsp 页面）处理页面的哈希片段。对该哈希的更改将自动在历史记录中创建一个新条目，因此浏览器的 go back 和 go forward 按钮可以正常工作，就像有几个不同的 HTML 页面一样。

然后我们可以监听 hashchange 事件来知道 hash 什么时候改变，然后替换页面的内容。所以点击下面的“page 1”后，hashchange 事件被触发，我们可以调用任何函数来在屏幕上呈现该页面。

window.addEventListener( 'hashchange', event => {
  alert( `loading ${ window.location.hash }` );
  // const page = window.location.hash;
  // pages[ page ].render();
});

<a href="#/page1">Page 1</a>
<a href="#/page2">Page 2</a>

因此，如果您单击“page1”，您将收到“正在加载第 1 页”的警报。

如果您随后单击第 2 页链接，您还会收到警报。

如果我们然后单击返回按钮，我们会再次收到警报“正在加载 apge 1”，因为我们历史记录中的上一个链接是包含 page1 的哈希。

因此，使用这种“路由”技术，我们可以轻松地让后退/前进按钮正常工作，而不必求助于 pushState() 和 popState()，因为我们只有一个，这对我们没有多大用处HTML 页面和 javascript 来填充它。

【讨论】：

我明白这一点，但我如何才能返回到最后加载的页面我有多个页面，不仅 2
在这种技术中，您必须加载的页面位于 window.location.hash 下。哈希值已经更改为 pageX，因此如果 hashchange 事件表明当前页面是 pageX，则必须使用 javascript 加载 pageX。因此，只要 hashchange 事件处理程序可以加载它们，您就可以拥有任意数量的超链接。在我给出的示例中，我会将所有将呈现页面的 javascript 函数存储在“页面”对象中。这样调用 pages.pageX.render() 会将这些 div 渲染到浏览器中。..
我试过了，但是当我按下后退按钮时，它会正确提醒但没有加载页面（我未注释渲染部分）。
我不知道您是如何加载页面的，因此无法对此发表评论。只调用正确的函数对你不起作用？
它会起作用，但我应该为此写很多。我正在避免这种情况。我想这样做而不在链接中添加任何标签，但似乎我不能这样做。我想要最好的方法。

【解决方案2】：

window.history.back() 会是你要找的吗？

【讨论】：

这与按下后退按钮的作用相同。