Question

我想使用带有<a>标记的HTML5历史记录api和经典链接。

我从/page1/开始，并使用ajax加载资源/recource/。

然后我用window.history.pushState(push_data, document.title, url)推送历史状态。然后我通过经典链接<a href = '/page2'>转到另一个页面，然后单击浏览器中的后退按钮。但是，不是显示页面/page1/已修改，而是显示来自/resource/页面的数据 - 只有纯文本数据或/rescource/中的json或whatelse。

如何让浏览器混合历史记录api和经典链接？

Answer 1

它完全符合您的要求。

你在：/page1位于堆栈顶部，然后推送/resource，然后推送 /page2。所以堆栈看起来像这样。

/page2
/resource
/page1

历史记录API只允许开发人员推送URL（以及包含一些数据的对象），仅此而已......例如：如果您说刚刚创建的动物的网页应该推送{{1}的状态然后你将在堆栈google.com上，当点击后退按钮你真的会去google.com。

网络上最重要的是URL代表一些数据。因此，当URL无效或显示不同内容时，您不应该在历史堆栈中推送google.com网址 - 现在您的示例将/resource网址与两个不相同的内容相关联

显示/resource
/resource文件本身

但他们不一样！这就是为什么你应该推送像/resource或（我认为最好的）/page1WithLoadedResource或/page1/resource或任何适合你的东西，并确保这个URL做你想要的只需在浏览器中输入它，无论您是在服务器上还是在客户端上服务都无关紧要...在客户端上，您可以只显示空白页面模板，然后通过AJAX加载page1?loaded=resource，就像您一样从/resource开始并加载{{1}}。

使用某些客户端MVC / MVVM框架时可以更容易地做到这一点，但这远远超出了这个问题的范围，但是您应该始终将URL与用于书签，处理，REST API以及越来越多的资源相关联。 ...

具有历史API的浏览器后退按钮

1 个答案: