html5 hashchange,hashchange事件

hashchange事件是html5新增的api，用来监听浏览器链接的hash值变化。

目前流行的spa框架的路由都有使用到该特性，接下来简单介绍下：

当URL的片段标识符更改时，将触发hashchange事件 (跟在＃符号后面的URL部分，包括＃符号)

属性

类型

描述

target

上下文为window对象

type

event类型

bubbles

事件是否能冒泡

cancelable

事件是否能被取消

oldURL

跳转前的URL

newURL

跳转后的当前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)