为什么在 location.hash 上不自动输出刷新？答案

【问题标题】：Why doesn't output refresh automatically on location.hash?为什么在 location.hash 上不自动输出刷新？
【发布时间】：2019-01-17 19:20:01
【问题描述】：

单击链接时不输出新位置哈希。

我不明白为什么浏览器不输出更新后的变量。

<html>
<body>
<p></p>
<a href="#2019-01">1</a>
<a href="#2019-02">2</a>
</body>
<script>
var p = document.querySelector('p');
p.innerHTML = location.hash; 
</script>
</html>

当我单击第一个链接时，浏览器中的地址更改为 #2019-01，但 p.innerHTML 没有显示任何内容。我预计它会显示 #2019-01。

如果我点击 crtl r 来重新加载页面，那么 p.innerHTML 会显示 #2019-01。

为什么我必须强制重新加载才能获得输出？有没有办法在不重新加载页面的情况下获取更新的 location.hash 值？

【问题讨论】：

script 标签之间的内容只在页面加载时运行一次。如果要在单击按钮时再次运行它，则必须在单击按钮时调用它

标签： javascript hash location

【解决方案1】：

我建议您创建一个showHash 函数，然后在页面加载时立即调用它。此外，您可以向window.onhashchange 添加事件侦听器，以便在哈希更改时随时调用showHash 函数。

showHash();

function showHash() {
  var p = document.querySelector('p');
  p.innerHTML = location.hash;
}

window.onhashchange = showHash;

<html>
  <body>
  <p></p>
  <a href="#2019-01">1</a>
  <a href="#2019-02">2</a>
  </body>
</html>

【讨论】：

谢谢，这有效，我尝试单击复选标记以接受您的答案，但它在我的浏览器中不起作用。
它已被标记为接受，可能只是您的浏览器需要一点时间来更新。谢谢！