location.hash和history.replaceState

时间:2016-06-17 02:05:32

标签: javascript html5 pushstate html5-history

我遇到绑定到window.hashchange的问题。调用history.replaceState时,除非已对location.hash进行调用,否则会触发'hashchange'事件。我正在使用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'事件

2 个答案:

答案 0 :(得分:3)

在我的Chromium浏览器中,只有#nav { height: calc(100vh - 174px); } 行会触发location.hash = "3"事件并且它不是“错误”。

来自MDN文档:

  

请注意,hashchange永远不会导致pushState()事件被触发,即使新网址仅与旧网址的旧网址不同。

  

hashchangehistory.replaceState()一样完全,但history.pushState()修改当前历史记录条目而不是创建新条目。

答案 1 :(得分:1)

这很简单,您必须在history.replaceState之后在窗口中触发hashchange本机事件。 :

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