window.location.hash 使用说明


Posted in Javascript onNovember 08, 2010

比如loation.href是 页面的url .但是 location.hash可以获取或设置页面的 标签值 比如http://domain/#testDemo中 咱们的location.hash 就是 #testDemo

下面引用一个 网上的demo
一个搜索版块,功能有3个:普通搜索,高级搜索,后台管理,分别指明他们各自的hash 值:#search,#advsearch,#adminboss. 在页面初始化的时候,通过window.location.hash来判断用户需要访问的页面,也就是将要显示的版块

var hash; 
hash = (!window.location.hash)?"#search":window.location.hash; 
window.location.hash = hash; 
//这里我们解释一下(!window.location.hash)什么意思?首先如果当前页面的地址栏的链接地址 不包含#....的这些的话,直接取值的话,他会为空!比如这个例子,https://3water.com/直接取 alert(window.location.hash)//""空 转化为 boolean值 为 false 
// 如果 https://3water.com#hello,world直接取 alert(window.location.hash)//#hello,world 转化为 boolean值 为 true 
//下面的就是 可以用switch判断 
//调整地址栏地址,使前进、后退按钮能使用 
switch(hash){ 
case "#search": 
show("panel1"); 
break; 
case "#advsearch": 
show("panel2"); 
break; 
case "#adminboss": 
show("panel3"); 
break; 
}

下面引用 别人的一句话:
通过window.location.hash=hash这个语句来调整地址栏的地址,使得浏览器里边的“前进”、“后退”按钮能正常使用(实质上欺骗了浏览器)。然后再根据hash值的不同来显示不同的面板(用户可以收藏对应的面板了),这就使得Ajax页面的浏览趋于传统化了。
Javascript 相关文章推荐
W3C Group的JavaScript1.8 新特性介绍
May 19 Javascript
各种常用浏览器getBoundingClientRect的解析
May 21 Javascript
javascript 日期时间 转换的方法
Feb 21 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
javascript中clone对象详解
Dec 03 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
微信小程序实现时间进度条功能
Nov 17 Javascript
vue+iview实现文件上传
Nov 17 Vue.js
原生js实现自定义滚动条组件
Jan 20 Javascript
JavaScript游戏之是男人就下100层代码打包
Nov 08 #Javascript
JavaScript游戏之优化篇
Nov 08 #Javascript
javascript开发中因空格引发的错误
Nov 08 #Javascript
window.ActiveXObject使用说明
Nov 08 #Javascript
发布一个基于javascript的动画类 Fx.js
Nov 05 #Javascript
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 #Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 #Javascript
You might like
php开发文档 会员收费1期
2012/08/14 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
jquery 防止表单重复提交代码
2010/01/21 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
vue的webcamjs集成方式
2020/11/16 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
python实现复制整个目录的方法
2015/05/12 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
python使用插值法画出平滑曲线
2018/12/15 Python
python配置grpc环境
2019/01/01 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
给朋友的道歉信
2014/01/09 职场文书
汉语言文学毕业求职信
2014/07/17 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
python 批量压缩图片的脚本
2021/06/02 Python
vue实现锚点定位功能
2021/06/29 Vue.js
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android