純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