修改位置

Question

考虑一个仅包含此脚本标签的页面：

<script type="text/javascript">
  window.location.hash = 'testing';
  window.history.back();
</script>

如果您访问Google.com，然后加载该页面，您将在地址栏中看到哈希更新，但是该页面返回到Google！我希望它只会删除#testing哈希。

---

如果我长时间包装它，则可以按预期运行：

<script type="text/javascript">
  setTimeout(function () {
    window.location.hash = 'testing';
    window.history.back();
  }, 1000);
</script>

地址栏短暂闪烁#testing哈希，然后将其删除。

---

这意味着，在某个时间点，将位置变化。当这种行为改变时，必须有一些事件发射。

我浏览了MDN上的事件列表，并找到了这些事件：

pageshow：当会话历史记录进入到达时，PAGESHOW事件将触发。(这包括攻击事件之后的背部/前进以及初始页面传播。(
load：当资源及其相关资源完成加载时，加载事件会发射。

这些事件均未解决问题。我尝试了：

<script type="text/javascript">
  window.addEventListener('pageshow', function () {
    window.location.hash = 'testing';
    window.history.back();
  }, false);
</script>

与load事件相同。地址栏闪烁#testing哈希，然后浏览器返回上一页。

---

如何检测是否可以安全地修改location.hash？

Answer 1

看来load事件在正确的轨道上，但略有扭曲。历史记录API在加载事件之后接收更改。

也就是说，此代码是有问题的：

<script type="text/javascript">
  window.addEventListener('load', function () {
    window.location.hash = 'testing';
    window.history.back();
  }, false);
</script>

但是此代码正确删除了哈希：

<script type="text/javascript">
  window.addEventListener('load', function () {
    setTimeout(function () {
      window.location.hash = 'testing';
      window.history.back();
    }, 1);
  }, false);
</script>

我不确定为什么是这样，我找不到任何规定的规格，但这是我经过一些反复试验后发现的。

2023更新：该行为仍然存在于Chrome V111和Safari V16.3，但在Firefox V111上不可再现。