hashchange

最新推荐文章于 2024-09-14 18:52:56 发布

weixin_34090562

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量62

点赞数

文章标签： javascript ViewUI

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

通用信息

规范

HTML5

接口

HashChangeEvent

是否冒泡

是

能否取消默认行为

不能

目标

defaultView

默认行为

无

属性

Property	Type	Description
`target`Read only	`EventTarget`	The browsing context (<code>window</code>).
`type`Read only	`DOMString`	The type of event.
`canBubble`Read only	boolean	Does the event normally bubble?
`cancelable`Read 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>属性上绑定事件处理函数:

 
         ( 
         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);