hashchange

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

hashchange相关推荐

从零开始学_JavaScript_系列（14）——dojo(7)（饼图，BorderContainer，hashchange，弹窗）...
5/5更新.BorderContainer自适应在本地时正常使用的方法,请查看原文代码之前那一段话 (60)创建一个饼形图比较简单的标签声明法:(只需要修改数据即可) ①首先,加载dojo文件和样式 ...
简单的基于hash和hashchange的前端路由
hash定义 hash这个玩意是地址栏上#及后面部分,代表网页中的一个位置,#后面部分为位置标识符.页面打开后,会自动滚动到指定位置处. 位置标识符 ,一是使用锚点,比如<a name=&quo ...
浅谈hashchange和popstate事件触发条件
基本概念工欲善其事,必先利其器.因此,让我们先从MDN上了解一下这两个事件的触发条件. 1.hashchange 当URL的片段标识符更改时,将触发hashchange事件 (跟在#符号后面的URL ...
hashchange和popstate事件触发条件
一. hasChange 触发条件 hash是URL中#后面那部分,同时修改hash值不会引起页面的刷新,也不会向服务器重新发送请求.通过hashchange事件可以监听它的变化.改变hash值有以下 ...
Busy Dialog init - hashchange will call BusyDialog.open - flower
Created by Wang, Jerry, last modified on Jun 29, 2015 要获取更多Jerry的原创文章,请关注公众号"汪子熙":
《JavaScript编程实战》
<JavaScript编程实战> 基本信息原书名:JavaScript programming: pushing the limits 作者: (美)Jon Raasch 译者: 吴海星 ...
使用modernizr.js检测浏览器对html5以及css3的支持情况
使用modernizr.js检测浏览器对html5和css3的支持情况详情请看主页:modernizr主页 1. modernizr 是什么? modernize 是一个js库----一个用于检测当 ...
Vue开发入门看这篇文章就够了
摘要: 很多值得了解的细节. 原文:Vue开发看这篇文章就够了作者:Random Fundebug经授权转载,版权归原作者所有. 介绍 Vue 中文网 Vue github Vue.js 是一套构建 ...
@HostListener 可接收的事件列表
下面有一个文档详细介绍Angular 中的事件列表: https://github.com/angular/angular/blob/master/packages/compiler/src/sche ...

hashchange

通用信息

属性

浏览器兼容性

相关事件

hashchange相关推荐

最新文章

热门文章