HTML 5 中的历史 API答案

【问题标题】：history API in HTML 5HTML 5 中的历史 API
【发布时间】：2012-04-09 05:51:46
【问题描述】：

我正在使用 Google chrome，并且我已经使用 Dive into HMTL 5 中提到的一种检测技术进行了测试，以支持 History API。但是下面的代码似乎不起作用。谁能告诉我我错过了什么？

function demo()
 {
  alert("history changing");
if(window.history && history.pushState)
{
    alert("api supported");
}
else
    alert("api not supported");
for(i=0;i<20;i++)
{
    history.pushState(null,null,"\try.html");
}
}

for 循环，我希望在浏览器的历史记录中插入 20 次 url “try.html”，但似乎不起作用。我从一个名为“try.html”的页面调用此函数，其中函数“demo”在页面加载时执行。页面“try.html”只有一行普通文本。我想要做的是，当用户在加载页面“try.html”后单击浏览器的后退按钮时，他仍将留在同一页面上，因为历史记录应该包含 20 个条目同一页面，即“try.html”，但事实并非如此。为什么？

【问题讨论】：

想告诉我们该代码的哪一部分不起作用？不要说“它不起作用”，而是试着告诉我们输出是什么以及预期的输出是什么。谢谢。
哦，对不起。所以它是这样的。 for 循环，其中我希望 url “try.html”在浏览器的历史记录中插入 20 次，似乎不起作用。我从一个名为“try.html”的页面调用此函数，其中函数“demo”在页面加载时执行。页面“try.html”只有一行普通文本。我想要做的是，当用户在加载页面“try.html”后单击浏览器的后退按钮时，他仍将留在同一页面上，因为历史记录应该包含 20 个条目同一页面，即“try.html”。
可能与您的 stateObj 为空有关。
但是必须要有 stateObj 吗？
我不知道。 Mozilla Documentation 并没有真正解决空值问题。也许您应该尝试使用一些虚拟数据来排除这种情况。

标签： html html5-history

【解决方案1】：

它对我有用。您可能会遇到两个问题：

如果您尝试从file:// URI 运行您的函数，那么您将收到一个安全错误。 Chrome 对此保持沉默，但 Firefox 会报告该错误。您需要将页面放在网络服务器上并通过http:// 访问它。
字符串"\try.html" 表示一个制表符后跟ry.html，您可能表示"/try.html"。

Here is a working example 基于您的代码。

【讨论】：

嗨！感谢您的答复。我尝试了这两件事。将 "\try.html" 更改为 "\1.html" 并将文件也上传到 Web 服务器。但问题仍然没有得到解决。我仍然无法在浏览器历史记录中看到更新后的添加条目。你能帮忙吗？
供您参考：- [链接] (sonatechsolutions.com/abhinav) 是包含名为 index.html 和 1.html 的 2 个 html 文件的文件夹。文件 index.html 包含上述脚本，因此应该使用 20 个 1.html 链接更新浏览器历史记录。但事实并非如此。请让我知道我错过了什么......
@geek_ji 停止在 URI 路径中使用 \ 而不是 /。 \ 是一个 JS 转义字符。
@robertc....谢谢您.. 非常感谢您。这听起来可能有点奇怪，但我在这个星球上见过的最愚蠢的人是我。浏览器的历史实际上正在更新，但我只是无法在谷歌浏览器的历史选项卡中看到相同的更新。我的意思是，在脚本内部执行之后，浏览器确实维护了 20 个 pg 条目。 1.html在堆栈上，但是在谷歌浏览器的历史选项卡中无法直观地看到。