【问题标题】:What to use with history api instead of hash to differentiate between sections on a web page?使用历史 API 而不是哈希来区分网页上的部分?
【发布时间】:2016-03-15 14:10:12
【问题描述】:

我有这个网址: 域/?budget=0-&pn=1

现在我有一个按钮,可以单击同一页面上的特殊视图。我已经这样做了:

domain/?budget=0-&pn=1#special

问题是我正在实现历史 API,而哈希值的变化导致 popstate 被触发,这是不好的。

对于 html5 历史 API 的这种情况,我应该使用什么来代替哈希?

【问题讨论】:

    标签: javascript jquery html html5-history


    【解决方案1】:

    使用单页应用程序(SPA wiki 定义为https://en.wikipedia.org/wiki/Single-page_application

    其中单个页面充当按需加载到页面中的其他内容的主机页面。在这种情况下,页面模板的使用可确保每个页面在某个时间或另一个时间都充当内容宿主以及内容页面。 描述了 HTML 页面的结构。每个都具有页面周围所需的结构以及内容容器,其内部 HTML 被内容页面中的 HTML 片段替换。 URL 中的标识符代表了加载到页面中的页面内容的唯一标识符。

    使用历史对象的新成员如此有价值的原因在于,即使您可以通过编程方式更改浏览器位置而不发回服务器,同时更新的位置只不过是一个常规 URL,它可以共享、复制或添加书签。这意味着您需要确保您的应用程序在页面的初始请求时与在使用 JavaScript 获取页面时一样好。

    演示如何通过使用 history.pushState 函数导航到第 2 页来影响第 1 页。页面的整体结构被保留,在收到 Ajax 调用的响应后,只有页面片段被注入到内容容器中。请注意页面标题如何保持不变,但容器中的 URL 和内容反映了页面 2 中的内容。

    如果您在使用 pushState 导航到第 2 页后刷新页面,请考虑一下。图 3 显示了页面在刷新时如何保持正确的 URL 并保留页面内容,但页面标题反映了它是直接从页面 2 提供的。

    这种行为是通过所有具有相同布局结构的页面实现的,但在标记中包含标识符以指定页面中的内容片段。这与普通客户端/服务器 Web 应用程序根据页面的标准 GET 请求提供完整 HTML 页面的精神相同,但随后将服务与 Ajax 调用结合使用以仅更新页面的特定部分。

    记住

    与大多数新 HTML5 功能领域一样,新历史对象中的功能可通过 polyfill 库获得,该库可以填补旧浏览器或尚未实施标准的浏览器的空白。

    【讨论】:

      猜你喜欢
      • 2014-10-02
      • 1970-01-01
      • 1970-01-01
      • 2015-10-29
      • 1970-01-01
      • 2014-12-22
      • 1970-01-01
      • 2010-12-21
      • 2023-04-01
      相关资源
      最近更新 更多