hashchange

hashchange事件会在页面URL中的片段标识符(第一个#号开始到末尾的所有字符,包括#号)发生改变时触发.

通用信息

规范

HTML5

接口

HashChangeEvent

是否冒泡

是

能否取消默认行为

不能

目标

defaultView

默认行为

无

属性

Property	Type	Description
targetRead only	EventTarget	The browsing context (<code>window</code>).
typeRead only	DOMString	The type of event.
canBubbleRead only	boolean	Does the event normally bubble?
cancelableRead only	boolean	Is it possible to cancel the event?
oldURL	string	The previous URL from which the window was navigated. Read only
newURL	string	The new URL to which the window is navigating. Read only

浏览器兼容性

• Desktop
 
• Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	5.0	3.6 (1.9.2) Support for the oldURL/newURL attributes added in Firefox 6.	8.0	10.6	5.0

这个页面里有几个用JavaScript模拟该事件的脚本,原理基本上都是隔一段时间检测一下location.hash是否发生变化.下面的这个实现可以在<code>window.onhashchange</code>属性上绑定事件处理函数:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

(function(window) {     // 如果浏览器原生支持该事件,则退出  if ( "onhashchange" in window.document.body ) { return; }     var location = window.location,     oldURL = location.href,     oldHash = location.hash;     // 每隔100ms检测一下location.hash是否发生变化   setInterval(function() {     var newURL = location.href,       newHash = location.hash;       // 如果hash发生了变化,且绑定了处理函数...     if ( newHash != oldHash && typeof window.onhashchange === "function" ) {       // execute the handler       window.onhashchange({         type: "hashchange",         oldURL: oldURL,         newURL: newURL       });         oldURL = newURL;       oldHash = newHash;     }   }, 100);   })(window);

相关事件

• popstate