【问题标题】:Browser back button with history API带有历史 API 的浏览器后退按钮
【发布时间】:2013-04-20 21:28:08
【问题描述】:

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

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

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

如何让浏览器混合使用历史 API 和经典链接?

【问题讨论】:

    标签: jquery ajax browser-history


    【解决方案1】:

    它和你做的完全一样。

    你在:/page1,它在堆栈的顶部,然后推送/resource,然后推送 /page2。所以堆栈看起来像这样。

    /page2
    /resource
    /page1
    

    History API 只允许开发人员推送 URL(以及带有一些数据的对象),仅此而已...例如:如果您说刚刚创建的动物网页应该推送 google.com 的状态,那么您将拥有 google.com 堆栈,当单击后退按钮时,您将真正转到 google.com。

    Web 上最重要的是 URL 代表一些数据。因此,当 URL 不起作用或显示不同的内容时,您不应该将 /resource URL 推送到历史堆栈中 - 现在您的示例将 /resource URL 与两个不相同的内容相关联

    1. 显示/resource内容的网页
    2. /resource 文件本身

    但它们不一样! 这就是为什么你应该推送类似/page1WithLoadedResource 或(我认为最好的)/page1/resourcepage1?loaded=resource 或任何适合你的东西的原因,并确保当你在浏览器中输入这个 URL 时,它会执行你想要的无论您是在服务器上还是在客户端上提供服务都没有关系...在客户端上,您可以只显示空白页面模板,然后通过 AJAX 完全加载 /resource,就像您在启动 /page1 和加载时所做的那样/resource.

    在使用某些客户端 MVC/MVVM 框架时,您可以更轻松地完成此操作,但这与此问题的范围相去甚远,但您应该始终将 URL 与用于书签、处理、REST API 等的资源链接起来...

    【讨论】:

      猜你喜欢
      • 2018-10-02
      • 2015-05-18
      • 2021-08-25
      • 1970-01-01
      • 2021-10-27
      • 1970-01-01
      • 1970-01-01
      • 2012-08-19
      • 2013-04-03
      相关资源
      最近更新 更多