0

我正在写一个小网站，其中有几个非常相似的页面。大多数时候，只有一个 div 的内容不同。导航、标题等保持不变。

所以我用“基本”html文件实现了这一点，一些较小的html文件只有一个content-div和这样的javascript代码（由按钮点击事件触发）：

$.get("content/text1.html", function(data) {
    $("#content").html(data);
});

这非常顺利，但问题是地址栏中的 url 不会随着这些请求而改变。因此，用户不可能链接到某些页面。我知道#-urls 是可能的，但我想要这样的网址：

example.com/talks/foo/bar

而不是一些解决方法。

在另一个 Thread 中，有人给了我关于 html5 浏览器历史 API（尤其是history.js）的提示。

我想用它实现什么：

  1. 有人单击按钮-> 触发 ajax 请求并更新 content-div 的内容-> url 更新为类似example.com/talks/foo/bar
  2. 如果有人example.com/talks/foo/bar直接在他的浏览器中请求，应该执行与（1）相同的ajax请求和内容更新

我试图通过以下方式实现第一个：

$.get("content/text1.html", function(data) {
    $("#content").html(data);
    History.pushState(null, null, "content/text1.html"); 
});

但是我应该如何达到第二点呢？使用重写器，将所有内容重定向到 base-html 文件和其中的一些 js 逻辑以解码 url 并触发 ajax 请求？

我有一种感觉，我有点走错路了..

  • 那么这是应该使用history.js 的方式吗？

  • 我怎样才能达到第二个要点？

4

1 回答 1

0

要在 html5 浏览器中获取初始状态，不需要 ajax 调用。就像你说的 url 本身被改变了，而不是哈希，所以服务器应该用已经加载的正确内容回复 url。

您应该在statechange事件处理程序中执行所有 ajax 调用和 DOM 操作。

因此，当用户单击链接时，您所做的就是调用和处理事件处理pushState程序中的 DOM 更改。statechange这是有效的，因为在被调用statechange时触发。pushState

于 2012-10-10T13:55:54.920 回答