在.load（）頁面上追加哈希到URL頁面更新

背景：我有一個帶有如下所示標記的頁面。我使用jQuery的.load（）方法與此代碼替換div.content容器的內容：在.load（）頁面上追加哈希到URL頁面更新

$(document).on('click', 'button#page2', function() { 
    $("div.content-container").load("page2.html"); 
});

問題：該方法的工作原理，但我想將網址與散列，即＃page2，這將允許後退按鈕功能。有沒有辦法將此功能添加到完全基於HTML和jQuery的網站？

我看過Ben Alman的燒烤插件，但作爲一個新來的異步內容和jQuery非專家，我很難搞清楚如何在我的項目中實現它。

HTML主頁面：

<head> 
<!--scripts & styles--> 
</head> 
<body> 
<button id="page2">Page 2</button> 
<button id="page3">Page 3</button> 
<div class="content-container"> 
<!--content is loaded here--> 
</div> 
</body>

page2.html（後來頁）不完整的HTML文檔：

<p>Here's some content from the second page.</p>

來源

2013-10-31 Marcatectura

據我所知，有沒有辦法做到這一點withing 純 jQuery的。您想要操縱瀏覽器歷史記錄以將路由添加到您的應用程序，並且要執行此操作，您需要一個jQuery plugin或直接與瀏覽器的本機API：偵聽hashchange事件和/或HTML5 History API。

快速和骯髒的玩具爲例，「清」你div：

$(document).on('click', 'button#page2', function() { 
    $("div.content-container").load("page2.html"); 
    location.hash = '#page2'; 
}); 

$(window).on('hashchange', function() { 
    if (location.hash === '') { 
    $("div.content-container").html(''); 
    } 
});

來源

2013-10-31 22:35:38 rvidal

感謝 - 我可以查看通過附加的URL。雖然有一個問題 - 點擊後退按鈕不會重新載入上一頁的HTML，但它只是改變URL哈希值。這是HTML5 History API的來源嗎？ – Marcatectura

不需要。通常情況下，您會希望聽到'hashchange'事件並相應地操作DOM（這是我們在示例中正在做的事情，當您回擊時它不會被清除？）。但要注意，這項工作最好留給圖書館（當然，學習內部內容對於教學原因是有用的）。 – rvidal

在.load（）頁面上追加哈希到URL頁面更新

回答

相關問題