javascript - anchor 导航和历史记录更改

Question

我有以下 HTML:

<a href="./page1.html">page 1</a>

单击链接时，会按预期添加新的历史记录条目。
现在我将其更改为:

<a href="./page1.html" onclick="func(event)">page 1</a>
<script type="text/javascript">
function func(event) {
    window.history.replaceState(null, '', "./page1.html");
}
</script>

现在，当我点击此链接时，历史记录不会改变。
我不明白为什么。我没有阻止 anchor 的操作(通过 event.preventDefault() 或返回 false)，因此我期望 anchor 添加新的历史条目，因为它应该...
首先发生了什么？链接导航或历史记录更改？
我很想得到一个解释。

Answer 1

据我所知，在 Firefox 和 Chrome 中进行测试，导航到当前页面的链接不会修改浏览器历史记录。两种浏览器似乎都将其视为“刷新”而不是导航。

这意味着您的第二个示例有效地替换了当前历史状态两次(一次使用 JavaScript，然后再次使用默认导航)。

这是我用于测试的代码。注释/取消注释 replaceState 以查看差异(没有差异)。注意:我发现在 Firebug 中打开 Persist 很有帮助，可以防止我的控制台日志在导航过程中被清除。

<a href="./page1.html" onclick="func(event)">page 1</a>
<script type="text/javascript">
function func(event) {
    console.log("before: " + window.history.length);
    //window.history.replaceState(null, '', "./page1.html");
    console.log("after: " + window.history.length);
}
onload = function() { console.log("load: " + window.history.length);}
</script>

我无法找到任何引用资料来解释浏览器为何以这种方式工作。不过，使用第一个示例进行验证非常容易。点击链接20次；您的后退按钮将保持禁用状态。

使用两个页面更新

page0.html

<a href="./page1.html" onclick="func(event)">page 1</a>
<script type="text/javascript">
function func(event) {
    console.log("before: " + window.history.length);
    window.history.replaceState(null, '', "./page1.html");
    console.log("after: " + window.history.length);
}
onload = function() { console.log("load: " + window.history.length);}
</script>

page1.html

Page 1
<script type="text/javascript">
onload = function() { console.log("load: " + window.history.length);}
</script>

这是点击链接时我在控制台中看到的内容

load: 1           page0.html (line 8)
before: 1         page0.html (line 4)
after: 1          page0.html (line 6)
load: 1           page1.html (line 3)
load: 1           page1.html (line 3)

我认为正在发生的事情:

1. 用户点击链接
2. func 被调用
3. 当前历史记录状态替换为 page1.html
4. 浏览器“导航”到 page1.html，即它所在的页面(第 3 步)，但由于是同一页面，因此将其视为刷新。