location.hash 和 history.replaceState答案

【问题标题】：location.hash and history.replaceStatelocation.hash 和 history.replaceState
【发布时间】：2016-10-18 17:28:20
【问题描述】：

我在绑定到 window.hashchange 时遇到问题。当调用history.replaceState 时，它会触发'hashchange' 事件，除非调用了location.hash。我正在使用 Chrome 42 和 jQuery 来协助绑定。我已经加载了 Sammy.js（实际上我正在尝试弄清楚 Sammy 将如何解释该行为）

我正在控制台中调试，并执行以下操作：

$(window).bind('hashchange', function(e) { alert('# change' + location.hash); });

history.replaceState({}, "", "#2") --> 显示警报

location.hash = "3" --> 显示警报

history.replaceState({}, "", "#4") --> 不显示警报

这是一个错误，还是预期的行为？我会认为 replaceState 要么总是，要么永远不会触发 'hashchange' 事件

【问题讨论】：

我不知道 Chrome 42，但无论如何，Chrome 51 都不会为 replaceState 触发 hashchange 事件，我认为它不应该如此。
您是否应该使用 setInterval() 函数并将正确的哈希值保存在隐藏的输入中，并在设置的时间间隔内验证它，如果输入值早于 url 上的哈希值是因为它改变了，所以做你必须做的执行并更新输入。

标签： javascript html pushstate html5-history

【解决方案1】：

在我的 Chromium 浏览器中，只有 location.hash = "3" 行会触发 hashchange 事件，这不是“错误”。

来自MDN 文档：

请注意，pushState() 永远不会触发 hashchange 事件，即使新 URL 与旧 URL 的不同之处仅在于其哈希值。

还有：

history.replaceState() 的操作完全与history.pushState() 类似，只是replaceState() 修改当前历史记录条目而不是创建新条目。

【讨论】：

在我的浏览器中，第一个“replaceState”确实触发了“hashchange”事件，我认为这是异常行为……但 Sammy.js 可能会以某种方式干扰。我应该在没有加载 Sammy 的情况下运行另一个测试。

【解决方案2】：

很简单，你必须在 history.replaceState 之后在窗口中触发 hashchange 原生事件，例如：

history.replaceState(null, null, '#yourHash');
window.dispatchEvent(new HashChangeEvent('hashchange'));

【讨论】：