通过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的浏览器有:

秉承不应基于浏览器检测,而应基于对象和方法检测的 原则,可用 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变化的更多相关文章

  1. js监听url的hash变化和获取hash值

    当浏览器浏览器的url进行变化时,浏览器默认是会去服务器将相应的资源给请求下来的,在不阻止默认行为的前提下,使用给url加锚点的方式(hash模式),让浏览器不跳转. window.addEventL ...

  2. url的hash和HTML5的history

    url的hash和HTML5的history 第一种方法是改变url的hash值. **显示当前路径 : **location.href http://localhost:8080/# 切换路径: l ...

  3. HTML5无刷新修改Url,history pushState/replaceState

    一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过history对 ...

  4. URL中 # (hash)的含义

    url中#(hash)的含义 hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分) 1."#"代表网页中的一个位置.其右面的字符,就是该位置的 ...

  5. HTML5无刷新修改URL

    HTML5新添加了两个api分别是pushState和replaceState,DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,可以在用户的访问记录中前进和 ...

  6. 转-利用Oracle审计功能来监测试环境的变化

    http://blog.csdn.net/luowangjun/article/details/5627102利用Oracle审计功能来监测试环境的变化 做过测试的人都应该会碰到这样的情况:测试发现的 ...

  7. HTML5 oninput实时监听输入框值变化的完美方案

    在网页开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制.剪贴和粘贴这些操作,处理组合快 ...

  8. 读书笔记:《HTML5开发手册》--现有元素的变化

    读书笔记:<HTML5开发手册>-- 现存元素的变化 继续学习HTML5语义化的内容,今天主要介绍一下,HTML5之前的元素经HTML5规范后的语义及一些使用示例. 一.cite HTML ...

  9. Html5 touch event

    HTML5 for the Mobile Web: Touch Events POSTED BY RUADHAN - 15 AUG 2013 See also... Touch-friendly Dr ...

随机推荐

  1. Docker-docker制作镜像

    一.下载镜像 a.以daocloud为mirror下载Nginx镜像 配置daocloud为mirror,下载Nginx镜像:(daocloud官网登陆后,发现镜像里找到Nginx镜像) 下载Ngin ...

  2. 深入学习js之——词法作用域和动态作用域

    开篇 当我们在开始学习任何一门语言的时候,都会接触到变量的概念,变量的出现其实是为了解决一个问题,为的是存储某些值,进而,存储某些值的目的是为了在之后对这个值进行访问或者修改,正是这种存储和访问变量的 ...

  3. 20145302张薇《Java程序设计》第九周学习总结

    20145302 <Java程序设计>第九周学习总结 教材学习内容总结 第十六周 JDBC简介 撰写应用程序是利用通信协议对数据库进行指令交换,以进行数据的增删查找 JDBC目的:让Jav ...

  4. 20145335郝昊《Java程序设计》第2周学习总结

    20145335郝昊<Java程序设计>第2周学习总结 教材学习内容总结 一.类型.变量与运算符 1.类型 整数: 可细分为为short整数(占2字节),int整数(占4字节),long整 ...

  5. Live Score FAQ

    Q: Why doesn't the selected game go to top? A: The game which include your favorite team will be alw ...

  6. intellij idea rearrange code

        reformat code的时候,无法将filed放在method前边,很恶心. 那么先去

  7. LeetCode——Longest Word in Dictionary through Deleting

    1. Question Given a string and a string dictionary, find the longest string in the dictionary that c ...

  8. RequestMaping url带参数及参数带“."的解决办法

    使用@PathVariable可以给url带参数,从而实现动态url的目的,如: @RequestMapping(value = "/ping/{version}", method ...

  9. phpcms v9 栏目伪静态完全自定义为栏目英文目录名

    1,后台增加url规则,增加后.导航上,或分页号上,会自动替换为静态的样式.类似www.abc.com/news/2/ 2表示页码 phpcms v9 的后台扩展,url规则,添加两个规则, 一个是名 ...

  10. JavaScript权威指南--词法结构

    使用广泛,所有的浏览器(桌面.手机.屏蔽等等)都配有相应的JavaScript解析器. JavaScript解析器如何工作? 浏览器在读取HTML文件的时候,只有当遇到<script>标签 ...