动态改变 URL 结构——后退/前进答案

【问题标题】：Changing URL structure dynamically -- back/forward动态改变 URL 结构——后退/前进
【发布时间】：2012-07-20 09:18:12
【问题描述】：

所以我正在尝试编写一个动态加载内容的脚本，这样页面就不必刷新（主要内容将被替换，但侧边栏、页眉、页脚等将保留）在同一个地方）。我已经触发了我的事件，并且我正在使用pushState() 来更新我的 URL。但是，我不知道应该如何使用window.history.back() 和window.history.forward()。我是否必须重新定义这两个功能才能让它成功旅行？

【问题讨论】：

标签： javascript jquery url-rewriting

【解决方案1】：

我发现做（我认为）你所追求的最简单的方法是将你的动态加载性连接到你的 window.location.hash，所以：

window.location.hash='page_1';

然后，您可以将事件处理程序绑定到 hash change 并从 AJAX 转到第 1 页。

更改哈希会生成一个新的历史记录页面，因此您根本不需要对 window.history 执行任何操作。

【讨论】：

【解决方案2】：

您正在使用 PushState 更新 URL，因此您的历史记录已经在所有支持该功能的浏览器中为您处理。但是老版本的浏览器不支持PushState，可能需要测试一下

if (history.pushState) { //is supported }

我建议您在此处使用History.js 脚本。它将恢复使用旧的 onhashchange 功能，用于 HTML4 浏览器和用于 HTML5 的 pushState。您不必手动处理history.forward。

另外，您确实需要配置您的 .htaccess，以便您网站的书签和页面链接正常工作。

Detailed Guide

【讨论】：

嗯，我这样做的方式是，每个页面本身就是一个完整的页面，我将特定的内容从那里拉出来放入当前页面。因此，如果有人想为此添加书签，就不会有问题。至于兼容性问题，这只是一个小项目，我正在严格为 HTML5 兼容的浏览器工作。我想我真正想做的是将特定操作绑定到 window.history.back() 函数。
好的。为什么要将操作绑定到该函数？ window.history.back，如果从 javascript 中调用，将使浏览器后退一步。如果用户按下后退按钮并且您想检测它，您可以使用this。在stackoverflow.com/questions/172957/… 看到类似的问题

【解决方案3】：

虽然pushState() 是历史记录，但您需要传递 URL，以便页面在不刷新的情况下加载。但是 windows.history.back() 会自动带您从浏览器缓存中访问的最后一页。这里您不传递任何 URL。并且这同样适用于windows.history.forward()。

【讨论】：

那么有没有办法缓存历史，或者模拟它？
默认情况下，浏览器缓存页面。所以下次如果用户尝试调用相同的页面，浏览器会从缓存中获取它，除非它被修改。在这种情况下，如果你调用 windows.history .back()，它将从缓存中获取最后访问的页面。
对，但我的问题是，如果我正在修改这些页面，我该如何解决这个问题？我可以在返回按钮上强制刷新吗？
可以。请查看此链接。webdeveloper.com/forum/showthread.php?t=137518