Question

我想在我的JavaScript应用程序中使用History状态。

这个JSFiddle示例https://jsfiddle.net/xyft1pfa/在点击链接时将URL更改为这些值：

/ page-1 /
/ page-2 /
/ page-3 /

我的问题是，如果我直接在浏览器中访问这些网址，我将如何从我的应用中制作这些网址的加载内容？

目前，如果我这样做，它显然会尝试在服务器上找到不存在的页面/端点。

点击链接加载第3页会将网址更新为/page-3/，但如果我要将/page-3/手动加载到地址栏，则会加载404缺少的网页，因为文件不会存在。我想找到一种方法来加载我的单页JS应用程序，并在以任何方式访问该URL时加载该页面上的正确内容。

我没有使用框架。

// this should be the Ajax Method.
// and load the url content
var setCurrentPage = function(url) {
  $('h2 span').html(url || "/");
  $("#menu-nav a[href='" + url + "']").fadeTo(500, 0.3);
};

$('#menu-nav a').click(function(e) {
  e.preventDefault();
  var targetUrl = $(this).attr('href'),
    targetTitle = $(this).attr('title');

  $("#menu-nav a[href='" + window.location.pathname + "']").fadeTo(500, 1.0);

  window.history.pushState({
    url: "" + targetUrl + ""
  }, targetTitle, targetUrl);
  setCurrentPage(targetUrl);
});

window.onpopstate = function(e) {
  $("#menu-nav a").fadeTo('fast', 1.0);
  setCurrentPage(e.state ? e.state.url : null);
};

HTML

<h2>Current Page: <span>/</span></h2>
<ul id="menu-nav">
  <li><a href="/page-1/" title="Pagina 1">Page 1</a></li>
  <li><a href="/page-2/" title="Pagina 2">Page 2</a></li>
  <li><a href="/page-3/" title="Pagina 3">Page 3</a></li>
</ul>

Answer 1

在setCurrentPage中，通过ajax请求从服务器加载页面数据：

var serverBase = "http://example.com/getPage?page=";
var setCurrentPage = function(url) {
  $.getJSON(serverBase + url, function(json){
    $('h2 span').html(json.html);
    $("#menu-nav a[href='" + url + "']").fadeTo(500, 0.3);
  });
};

服务器可以通过json响应：

{"html": "<div>got from the server</div>"}

您需要根据您在服务器中的期望设置正确的网址。

您可能还会了解如何使用单页网站的#hash位置：您可能还会看到这个想法：https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling

如何使用浏览器历史记录状态在我的单页JavaScript应用程序中加载URL？

1 个答案: