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

我正在尝试用JavaScript编写一个单页web应用程序。期望的行为:

当用户第一次进入http://myapp.example.com(主页)，或该域名的任何其他URL时，他们的浏览器下载1个大的HTML文件(以及相关的JS/CSS/图像文件等)。-->
HTML文件包含<div>元素，每个元素代表一个不同的"页面";只有一个"page"div会在任何给定的时间显示
当用户点击一个链接，应该把他们带到一个不同的"页面"，JS操纵DOM隐藏当前页面和显示/显示所需的一个
每当用户"导航"到不同的"页面"时，浏览器中的URL应该改变，并且新的URL应该通过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以确定要显示/显示哪个"页面"?

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

在onload上，您可以$("#yourDivId").show()请求(或默认，如果没有请求)div, $("#yourDivId").hide()和其他div。

在每个链接上，直接更改散列并设置所请求的div可见。或者设置一个计时器，间隔检查哈希值，看看哈希值是否发生了变化。(没有原生的onhashchange事件)

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

$(div#page).hide();

然后，您可以使用

检查当前URl:

var pathname = window.location.pathname;

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

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

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

相关内容

最新更新

热门标签：