纯JavaScript中基于URL的单页应用导航？

Question

我正在尝试使用JavaScript编写单页Web应用程序。 所需行为：

当用户首次访问http://myapp.example.com （主页）或该域之外的任何其他URL时，他们的浏览器会下载1个大型HTML文件（以及相关的JS / CSS /图像文件，等等。）。 -> 这么大的前期下载
HTML文件包含<div>元素，每个元素代表一个不同的“页面”。 在任何给定时间仅显示1个“页面” div
当用户单击将其带到另一个“页面”的链接时，JS操纵DOM来隐藏当前页面并显示/显示所需的页面。
每次用户“导航”到另一个“页面”时，其浏览器中的URL均应更改，并且应通过HTML5 History API将新的URL添加到浏览器历史记录中

我想知道如何做到这一点。 我非常喜欢基于jQuery的内容，而不是尝试编写本地化的内容。 但是，如果我必须自己编写此代码，则可以使用以下1 HTML文件的一般结构：

<html>
    <head> ... </head>
    <body>
        <div id="home" class="page">
            <!-- Content for home page, say http://myapp.example.com/#home. -->
        </div>

        <div id="about" class="page">
            <!-- Content for About page, say http://myapp.example.com/#about. -->
        </div>

        <div id="contact" class="page">
            <!-- Content for Contact page, say http://myapp.example.com/#contact. -->
        </div>

        <!-- Etc. for all other "pages" -->         
    </body>
</html>

我如何：

默认情况下，隐藏所有“页面div”，然后检查URL以找出要显示/显示的“页面”？
是否通过HTML5历史记录API将当前URL添加到浏览器历史记录中？

Answer 1

您可以使用并设置window.location.hash并将该值用于$("#yourDivId").show()和$("#yourDivId").hide() 。

在onload您可以$("#yourDivId").show()所请求的div（如果没有请求， $("#yourDivId").hide()默认值），而$("#yourDivId").hide()是其他div。

并且在每个链接上，直接更改哈希值并将请求的div设置为可见。 或设置一个计时器，以检查某个时间间隔上的哈希值以查看哈希值是否已更改。 （没有本地onhashchange事件。）

Answer 2

我认为您应该在开始时隐藏每个div。

$(div#page).hide();

然后，您可以使用以下方法检查当前的UR1：

var pathname = window.location.pathname;

每次用户更改URL时：首先隐藏每个div，然后检查并显示所需的div。

Answer 3

这就是单页应用程序框架存在的原因。 我认为值得学习其中的一些，例如AngularJS或BackboneJS。

Answer 4

如果您想滥用浏览器历史记录，建议您阅读一下 history.pushState()上的这篇文章。 :-)

纯JavaScript中基于URL的单页应用导航？

问题描述

4 个解决方案

解决方案1
2 已采纳 2014-05-22 14:48:55

解决方案2
2 2014-05-22 14:51:59

解决方案3
0 2014-05-22 14:55:12

解决方案4
0 2014-05-22 15:25:07

纯JavaScript中基于URL的单页应用导航？

问题描述

4 个解决方案

解决方案1 2 已采纳 2014-05-22 14:48:55

解决方案2 2 2014-05-22 14:51:59

解决方案3 0 2014-05-22 14:55:12

解决方案4 0 2014-05-22 15:25:07

解决方案1
2 已采纳 2014-05-22 14:48:55

解决方案2
2 2014-05-22 14:51:59

解决方案3
0 2014-05-22 14:55:12

解决方案4
0 2014-05-22 15:25:07