1

我有一个链接，我正在尝试使用历史 API - 它位于我的单页应用程序的索引页面上：

<div id="main">
    <div id="logoutlinkdiv">
        <a href = "logout.php" id="logoutlinka">Log out</a>
    </div>
</div>

当我单击该链接时，一个模板会加载到#main我的索引页面上的 div 中——并且 URL 会更改xxx/logout.php为应有的状态。这是负责交换的javascript：

function supports_history_api() {
  return !!(window.history && history.pushState);
}

function swapPage(href) {
  var req = new XMLHttpRequest();
  req.open("GET",
           "templates/" + // ALL MY TEMPLATES ARE IN THIS DIRECTORY
             href.split("/").pop(),
           false);  
  req.send(null);
  if (req.status == 200) {
    document.getElementById("main").innerHTML = req.responseText;
    return true;
  }
  return false;
}

function addClicker(link) {
  link.addEventListener("click", function(e) {
    e.preventDefault();
    if (swapPage(link.href)) {
      history.pushState(null, null, link.href);
    }
  }, true);
}

function setupHistoryClicks() {
  addClicker(document.getElementById("logoutlinka"));
}

$(document).ready(function() {
    window.onload = function() {
        if (!supports_history_api()) { return; }
        setupHistoryClicks();
        window.setTimeout(function() {
            window.addEventListener("popstate", function(e) {
                swapPage(location.pathname);
            }, false);
        }, 1);
    }
});

一切正常，但是当我单击后退按钮时，模板目录会加载到#maindiv 中。发生这种情况是因为location.pathname计算结果为/~Eamon/，而在href.split("/").pop()- 之后它只是一个空字符串。因此，模板目录被加载，因为它是函数中指向的目录swapPage。

显然，当我单击后退按钮时，我希望程序做的只是反转刚刚发生的事情。在这种情况下，这意味着在单击链接之前交换我在#maindiv 中的内容。如何“保存”我之前的内容并在单击后退按钮时加载它？它可能像更改目录结构一样简单......但我希望我的应用程序成为一个 SPA。

我读过的关于这个主题的东西：

  1. http://diveintohtml5.info/history.html（这是我在建模后的代码）
  2. http://www.sitepoint.com/an-overview-and-usage-of-javascript-history-api/
  3. http://html5doctor.com/history-api/
  4. http://dev.opera.com/articles/view/introducing-the-html5-history-api/
4

0 回答 0