目前最方便有效监听 URL 地址变化的方案(优雅)

单页面应用通过检测 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 条评论
请不要发布违法违规有害信息,如发现请及时举报或反馈
还没有人评论呢,速度抢占沙发!
相关文章
这里还什么都没有 o(╯□╰)o