Question

考虑一个只包含此脚本标记的页面：

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

如果你去google.com，然后加载该页面，你会在地址栏中看到哈希更新，但页面会回到谷歌！我希望它只是删除#testing哈希。

如果我将其包装在一个很长的超时时间内，它会按预期工作：

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

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

这意味着，在某个时间点，对location.hash的更改会传播到历史记录api。当此行为发生变化时，必定会触发一些事件。

我查看了mdn上的事件列表并找到了这些：

pageshow：遍历会话历史记录条目时会触发pageshow事件。（这包括后退/前进以及onload事件后的初始页面显示。）
load：当资源及其相关资源加载完毕后，将触发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>

我不知道为什么会这样，而且我找不到任何说明应该是这样的规范，但这是我在经过一些试验和错误后发现的。

在页面加载之前修改location.hash

1 个答案: