Question

我正在尝试用JavaScript编写单页Web应用程序。期望的行为：

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

我想知道如何做到这一点。我非常喜欢基于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将当前网址添加到浏览器历史记录中？

Answer 1

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

在onload上，$("#yourDivId").show()可以$("#yourDivId").hide()请求（或默认情况下，如果没有请求）div，{{1}}其他div。

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

Answer 2

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

$(div#page).hide();

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

var pathname = window.location.pathname;

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

Answer 3

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

Answer 4

如果您想滥用浏览器历史记录，建议您在history.pushState()上阅读this article。的： - ）

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

4 个答案: