hashchange事件

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)