window.location.hash使用总结
最近做项目经常与window.location.hash打交道,在这总结梳理下。
location.hash可以用来获取或设置页面的标签值,比如http://space.163.com/m/#about的location.hash="#about"。通过window.location.hash = hash 这个语句可以调整地址栏的地址,使得浏览器里边的“前进”、“后退”按钮能正常使用,然后根据hash值的不同来显示不同的模块。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var hash; hash = (!window.location.hash) ? "#about" : window.location.hash; window.location.hash = hash; switch (hash) { //用switch判断,调整地址栏地址 case "#about" : show( "panel1" ); break ; case "#advsearch" : show( "panel2" ); break ; case "#adminboss" : show( "panel3" ); break ; } |
onhashchange事件
在当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发,这是一个HTML 5新增的事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 5.0+支持该事件。
它的使用方法有三种:
1 2 3 4 5 | window.onhashchange = function (){}; window.addEventListener( "hashchange" , function (){}, false ); <body onhashchange= "myFunction()" > |
对于不支持onhashchange的浏览器,可以用setInterval监控location.hash的变化。
调用方式:
通过设置Location 对象 的 location.hash 或 location.href 属性修改锚部分。
使用不同书签导航到当前页面(使用"后退" 或"前进"按钮)
点击链接跳转到书签锚
window.location.hash读取#值
window.location.hash这个属性可读可写。读取时,可以用来判断网页状态是否改变;写入时,则会在不重载网页的前提下,创造一条访问历史记录。
手机阅读请扫描下方二维码:
上一篇:移动端一段小动画竟影响了苹果机文字无法复制?
下一篇:逐帧还是视频,如何选择
12345678

1
1
1
1
1
1
1
1
1
1
1
1
12345678

12345678
12345678
12345678
12345678
12345678

12345678

12345678
"and"n"="n
12345678
"and"s"="d
1

1
1

1

1

1

1

1

1

1

1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1