使用两页更新

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>

现在，当我点击此链接时，历史记录不会发生变化我无法理解为什么。我没有阻止锚点的操作（通过event.preventDefault()或返回false）所以我期望从锚点添加新的历史记录条目，因为它应该... 先发生什么事？链接导航或历史记录更改？
我很乐意得到解释。

Answer 1

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

这意味着您的第二个示例实际上是两次替换当前历史记录状态（一次使用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)

我认为发生了什么：

用户点击链接
func被称为
当前历史记录状态已替换为page1.html
浏览器＆＃34;导航＆＃34;到page1.html已经显示的页面（步骤3），但将其视为刷新，因为它是同一页面。

锚导航和历史变化

1 个答案:

使用两页更新