单页面应用通过检测 URL 的 hash 改变或 window.history (具体是 URL 的 path 部分)改变实现页面不刷新而能重新渲染,那么如何监听 hash 变化或 window.history 变化?
- 检测 hash 变化:通过
window.addEventListener('hashchange', () => {})
可以直接简单有效地监听 URL 的 hash 哈希部分发生变化。 - 检测 window.history 变化:我通过百度和 Google 查阅了一些资料后发现,并没有一种方法可以做到一步到位监听 window.history 变化。
添加一个自定义事件用于监听 URL 变化
history.back()、history.forward() 和 history.go() 事件都会触发 popState 事件。但是 history.pushState() 和 history.replaceEstate() 不会触发 popState 事件。因此我们需要做些代码处理让它们都能触发某一个事件,以下是我在 stackoverflow 上找到一个方案:
添加一个自定义事件 locationchange
,当 URL 发生变化(但不包括 hash 变化)就触发该事件,封装代码:
window.history.pushState = (fn => function pushState() {
var ret = fn.apply(this, arguments)
window.dispatchEvent(new Event('pushstate'))
window.dispatchEvent(new Event('locationchange'))
return ret
})(window.history.pushState)
window.history.replaceState = (fn => function replaceState() {
var ret = fn.apply(this, arguments)
window.dispatchEvent(new Event('replacestate'))
window.dispatchEvent(new Event('locationchange'))
return ret
})(window.history.replaceState)
window.addEventListener('popstate', () => {
window.dispatchEvent(new Event('locationchange'))
})
使用:
window.addEventListener('locationchange', () => {
console.log('location changed!')
})
附一:URL 字符串解析规则
(截图自: https://nodejs.org/api/url.html#url-strings-and-url-objects)

0 条评论
请不要发布违法违规有害信息,如发现请及时举报或反馈!
还没有人评论呢,速度抢占沙发!