【html5】hashchange Event – 监测URL的hash变化
通过URL传值,在?后附加以=连接的键值对,各键值对间以&连接;也可以通过URL传递页面参数,在”#”后附加的方式。两者最大的一个 区别在于:后者不会发起请求,不会导致页面刷新。常见应用场景在于:不需要请求服务器,由浏览器端脚本直接定位到某个条件下的页面展示。例如:在这个页面 中http://www.istartedsomething.com/bingimages/#20101106-us,带hash值打开的是展示某个 大图的页面,不带hash值打开(http://www.istartedsomething.com/bingimages/)的只是一个日历的图片集 界面,需要再次点击才能展示某个大图。
如果需要根据URL的hash值变化,来进行不同的页面处理,需要一个监测方案。最常见的方法就是通过一个定时程序,不停的去检测url中hash的变化,一旦检测到变化,则触发操作。
但这个方案并不是实时触发的,而且究竟该多久检测一次,没有一个有依据的数值。如果数值过大,可能会影响到页面的快速呈现;如果数值过小,则会引起过高的资源占用。
比较完美的一个方式是采用onhashchange的事件监测。
hashchange事件在html5中有定义,在url的hash段变化的时候触发。目前支持onhashchange的浏览器有:
- Gecko 1.9.2 (Firefox 3.6/Thunderbird 3.1/Fennec 1.0)
- IE 8
- WebKit 528+ (Safari/Google Chrome)
- Opera 10.70
秉承不应基于浏览器检测,而应基于对象和方法检测的 原则,可用 if(‘onhashchange’ in window) { } 检测浏览器是否支持onhashchange。这里不能用 typeof window.onhashchange === ‘undefined’ 来检测,因为很多支持onhashchange的浏览器下,其初始值就是undefined。
需要注意的是,在IE8以ie7的模式运行时,window下存在onhashchange这个方法,但是永远不会触发这个事件,因此需要先检测IE的document.documentMode。
综上所述,采取比较完善方式的代码片段:
if( ('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {
// 浏览器支持onhashchange事件
window.onhashchange = hashChangeFire; // TODO,对应新的hash执行的操作函数
} else {
// 不支持则用定时器检测的办法
setInterval(function() {
var ischanged = isHashChanged(); // TODO,检测hash值或其中某一段是否更改的函数
if(ischanged) {
hashChangeFire(); // TODO,对应新的hash执行的操作函数
}
}, 150);
}
通过URL hash来传递数据,在某些场景下相对URL query的方式,不会引发浏览器发起新连接,是一个很好的优化。同时可让页面中的某些中间交互环节通过URL可访问到,是一个很好的体验。试试吧:)
【html5】hashchange Event – 监测URL的hash变化的更多相关文章
- js监听url的hash变化和获取hash值
当浏览器浏览器的url进行变化时,浏览器默认是会去服务器将相应的资源给请求下来的,在不阻止默认行为的前提下,使用给url加锚点的方式(hash模式),让浏览器不跳转. window.addEventL ...
- url的hash和HTML5的history
url的hash和HTML5的history 第一种方法是改变url的hash值. **显示当前路径 : **location.href http://localhost:8080/# 切换路径: l ...
- HTML5无刷新修改Url,history pushState/replaceState
一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过history对 ...
- URL中 # (hash)的含义
url中#(hash)的含义 hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分) 1."#"代表网页中的一个位置.其右面的字符,就是该位置的 ...
- HTML5无刷新修改URL
HTML5新添加了两个api分别是pushState和replaceState,DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,可以在用户的访问记录中前进和 ...
- 转-利用Oracle审计功能来监测试环境的变化
http://blog.csdn.net/luowangjun/article/details/5627102利用Oracle审计功能来监测试环境的变化 做过测试的人都应该会碰到这样的情况:测试发现的 ...
- HTML5 oninput实时监听输入框值变化的完美方案
在网页开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制.剪贴和粘贴这些操作,处理组合快 ...
- 读书笔记:《HTML5开发手册》--现有元素的变化
读书笔记:<HTML5开发手册>-- 现存元素的变化 继续学习HTML5语义化的内容,今天主要介绍一下,HTML5之前的元素经HTML5规范后的语义及一些使用示例. 一.cite HTML ...
- Html5 touch event
HTML5 for the Mobile Web: Touch Events POSTED BY RUADHAN - 15 AUG 2013 See also... Touch-friendly Dr ...
随机推荐
- 使用selenium前学习HTML(3)——元素
<!-- HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码. 注释:开始标签常被称为开放标签(opening tag),结束标签常称为闭合标签(clos ...
- 【c++ primer, 5e】参数传递
p187~p199: [传值参数] [传引用参数] 使用引用形参返回额外信息:传入一个(或者多个)额外的引用实参,令其保存字符出现的次数. 6.11 #include <iostream> ...
- 在Pycharm中配置Github
Pycharm是当前进行python开发,尤其是Django开发最好的IDE.GitHub是程序员的圣地,几乎人人都在用. 本文假设你对pycharm和github都有一定的了解,并且希望在pycha ...
- Django学习笔记之Django ORM Aggregation聚合详解
在当今根据需求而不断调整而成的应用程序中,通常不仅需要能依常规的字段,如字母顺序或创建日期,来对项目进行排序,还需要按其他某种动态数据对项目进行排序.Djngo聚合就能满足这些要求. 以下面的Mode ...
- Apache httpd服务部署
1. yum安装 yum install httpd yum install httpd-devel yum install httpd-manual 2. 配置 vim /etc/httpd/con ...
- 20145313张雪纯 《Java程序设计》第3周学习总结
20145313张雪纯 <Java程序设计>第3周学习总结 教材学习内容总结 4.1.1 定义类 package four; class Clothes{ String color; ch ...
- RocEDU.阅读.写作《乌合之众》(一)
序言 作者在序言里主要论述了时代演变的内在原因,表明对群体进行研究的重要性,阐述了研究群体行为特征时的研究方法,并概述了群体的发展过程. 造成文明变革的唯一重要变化,是影响到思想.观念和信仰的变化.目 ...
- <linux/init.h>,<linux/module.h>头文件不存在等问题的解决方法
这个问题真心是处理了一个下午,还自己去下载了个最新的内核拿来编译,其实是完全没必要的,因为ubuntu系统是可以直接下载新内核的. 你可以在/usr/src/文件夹下找到这些内核文件夹,比如说我自己的 ...
- shell编程(二)
case判断 前面了解了shell编程的if判断,其实除了if判断,还有case判断. case语法: case VAR in case1) command1 ;; case2) command2 ; ...
- Jquery14 工具函数
学习要点: 1.字符串操作 2.数组和对象操作 3.测试操作 4.URL 操作 5.浏览器检测 6.其他操作 工具函数是指直接依附于 jQuery 对象,针对 jQuery 对象本身定义的方法,即全局 ...