單頁網站的后退按鈕

Question

我有一個分頁的網站，嚴重依賴jQuery。 作為一個組合，用戶可以單擊各種設計，其中jQuery將隱藏主頁，並根據查詢字符串返回的內容重建設計頁面。

問題是，想要返回到主要投資組合頁面的人自然會按下瀏覽器上的“返回”按鈕，從而使他們返回到以前使用的任何網站（例如Google搜索）。 實際上，預期的行為是它們返回主體。

我的問題是，實現“返回”按鈕就像在多頁網站上一樣起作用的最佳方法是什么。 它會涉及實現我自己的查詢堆棧嗎？ 最好的選擇是什么。

非常感謝。 如果您希望看到實際的網站，請訪問這里 。

Answer 1

看一下History.js庫，可以處理兩種現代瀏覽器，並且對較舊的HTML4瀏覽器具有后備功能

https://github.com/browserstate/history.js/

在$(".mLink").click(function(){...

每當觸發滾動時，都可以添加類似的內容

case "mL0":
    $("html, body").stop().animate({ scrollTop: 0}, 1000, 'easeInOutExpo');
    History.pushState(null, null, "?home"); 
    break;
case "mL1":
    $("html, body").stop().animate({ scrollTop: ($('#filter').offset().top-72) }, 1000, 'easeInOutExpo');
    History.pushState(null, null, "?portfolio"); 
    break;
...

美麗的投資組合網站，順便說一句。

Answer 2

如何在網址中添加井號標簽？ 像這樣嗎

<a href="#about">About</a>

在代碼的某處應該有一行？

<div id="about">
  <h2>About/h2>
  <!-- More content here -->
</div>

Answer 3

您可能需要研究HTML5 History API 。 有很多關於如何開始使用它的教程，但是基本要點是，當您使用jQuery加載新的“頁面”時，將其推入歷史堆棧：

// After loading the new page...
window.history.pushState({}, '', 'newpage.html');

即使頁面從未加載過，這也將使用戶代理在URL欄中顯示yoursite.com/newpage.html 。

Caniuse報告說， 歷史記錄API支持相當不錯 。 通常的可疑對象（IE 7和8）沒有支持，但是有可用的polyfills 。

使用History API的唯一警告（這是一個重要的警告）是： 您作為history.pushState的第三個（可選）參數傳遞的頁面必須存在於服務器上 。 用戶可以從URL欄中復制URL並共享，因此頁面名稱必須與實際頁面相對應。 這樣做的麻煩在於，由於您沒有動態加載的單獨頁面，因此它似乎不太適合您的網站。

在我看來，您的投資組合是一個連續的頁面，因此，我建議您使用哈希網址。 也就是說，網址為yoursite.com/#about和yoursite.com/#contact 。 您可以在加載新頁面時更新window.location以包括哈希值（瀏覽器不會重新加載該頁面）。

window.location = '#new-page-that-was-just-navigated-to';

或者，您可以只更新window.location.hash 。 當您的網站使用此屬性加載時，可以使用javascript檢查哈希的內容，以確定應顯示哪個頁面。

$(document).ready(function() {
    switch(window.location.hash) {
        case 'home': // load home
        case 'about': // load about
        default: // load default page (index)
    }
});

此外，您可以使用HashChange事件 （可在MDN docs頁面上使用polyfill）從HTML中提取JS。 而不是這樣做：

<a href="javascript:void(0);" id="about">About</a>
<a href="javascript:void(0);" id="projects">Projects</a>
<a href="javascript:void(0);" id="contact">Contact</a>

<script>
document.getElementById('about').addEventListener('click', function() {
    // navigate to about page
}, false);

document.getElementById('projects').addEventListener('click', function() {
    // navigate to projects page
}, false);

//etc.
</script>

您可以改為：

<a href="#about" id="about">About</a>
<a href="#projects" id="projects">Projects</a>
<a href="#contact" id="contact">Contact</a>

<script>
window.addEventListener('hashchange', function() {
    switch(window.location.hash) {
        case 'about': // load page
        case 'projects': // load page
        case 'contact': // load page
        default: // not found
    }
}, false);
</script>

這樣做的好處是您的鏈接具有有意義的href，而您不必將事件偵聽器添加到站點上的每個鏈接。 只需為其分配一個哈希值，然后監聽hashchange 。

編輯

請注意，這也適用於jQuery：

$(window).on('hashchange', function() {
    switch(window.location.hash) {
        case 'about': // load page
        case 'projects': // load page
        case 'contact': // load page
        default: // not found
    }
});

Answer 4

您的內容是通過AJAX在單個div中加載的。 因此，返回上一步有點困難，因為您的內容已用新內容更新。

Answer 5

您可以使用“ history.pushState”根據您單擊的菜單項來更改URL。您可以在此網頁中查看示例-http://html5.gingerhost.com/ 。

“返回”按鈕通常轉到上一個URL，而在AJAX頁面中，URL本身不會更新。 您可以使用“ history.pushState”顯式更改URL，而BACK可以像您期望的那樣工作。

這也將使您的網站對搜索引擎友好