hashchange事件是html5新增的api，用来监听浏览器链接的hash值变化。
目前流行的spa框架的路由都有使用到该特性，接下来简单介绍下：
当URL的片段标识符更改时，将触发hashchange事件 (跟在＃符号后面的URL部分，包括＃符号)
| 属性 | 类型 | 描述 |
|---|---|---|
| target | EventTarget |
上下文为window对象 |
| type | DOMString |
event类型 |
| bubbles | Boolean |
事件是否能冒泡 |
| cancelable | Boolean |
事件是否能被取消 |
| oldURL | String |
跳转前的URL |
| newURL | String |
跳转后的当前URL |
下面是一个使用hashchange的一个例子。
function getUUID () {
return Math.floor(Math.random() * 1000000)
}
window.onload = function () {
const el = document.getElementById('toggle')
el.onclick = (e) => {
e.preventDefault()
const uuid = getUUID()
location.hash = '#' + uuid
}
window.onhashchange = (e) => {
console.log('oldURL:', e.oldURL)
console.log('newURL:', e.newURL)
}
}
hashchange.gif
浏览器兼容性：
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | safari |
|---|---|---|---|---|---|
| Basic support | 5.0 | 3.6 (1.9.2)Firefox 6 中加入对 oldURL/newURL 属性的支持. | 8.0 | 10.6 | 5.0 |
为了兼容所有浏览器，以下为onhashchange的polyfill:
// 兼容低版本的hashchange
(function(window) {
if ('onhashchange' in window) { return; }
var location = window.location,
oldURL = location.href,
oldHash = location.hash
setInterval(function() {
var newURL = location.href, newHash = location.hash
if (newHash != oldHash && typeof window.onhashchange === 'function') {
window.onhashchange({
type: 'hashchange',
oldURL: oldURL,
newURL: newURL
})
oldURL = newURL
oldHash = newHash
}
}, 100)
})(window)
