Question

我试图弄清楚如何使pushState工作，所以我使用一个简单的HTML页面进行测试，其中包含一个按钮，如下所示，但它并没有改变url或者似乎做任何事。

<html>
<body>
<div id="test">
    <button id="btn">Click Me</button>
</div>

<script>
document.getElementById("btn").onclick=function(){
    history.pushState({}, '', 'newurl.html');
}
</script>
</body>
</html>

Answer 1

该代码没有任何问题。

我能够通过尝试直接从我的本地磁盘加载文档（通过file: URL）来重现该问题。它给出了此错误消息：

x.html：9 Uncaught SecurityError：无法执行＆＃39; pushState＆＃39; on＆＃39; History＆＃39 ;:一个历史状态对象，其URL为＆＃39; file：///Users/myusername/tmp/fjdkfjkd/newurl.html'无法在原始文档中创建＆＃39; null＆＃39;和URL＆＃39; file：///Users/myusername/tmp/fjdkfjkd/x.html' .document.getElementById.onclick @ x.html：9

当我从Web服务器（通过HTTP）加载文档时，问题就消失了。

您需要从网络服务器加载文档。

在很多情况下，file:和http: URL之间的行为会有所不同（包括方案和根相对URL，XMLHttpRequest，postmessage等等）。始终通过HTTP进行测试以避免这些问题。

HTML history.pushState无法正常运行

1 个答案: