Question

我有一个链接，我正在尝试使用历史记录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);
    }
});

一切正常，但是当我点击后退按钮时，模板目录会加载到#main div中。这是因为location.pathname评估为/~Eamon/，而href.split("/").pop()之后 - 它只是一个空字符串。因此，模板目录被加载，因为它是swapPage函数中指向的目录。

显然，当我点击后退按钮时，我希望程序完成所有操作。在这种情况下，它意味着在点击链接之前交换回#main div中的内容。如何“保存”之前的内容并在单击后退按钮时加载它？它可能就像更改目录结构一样简单......但我希望我的应用程序成为SPA。

我读过的关于这个主题的事情：

http://diveintohtml5.info/history.html（这就是我之后为我的代码建模的内容）
http://www.sitepoint.com/an-overview-and-usage-of-javascript-history-api/
http://html5doctor.com/history-api/
http://dev.opera.com/articles/view/introducing-the-html5-history-api/

回到历史api（几乎工作的例子）

0 个答案: