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 相关文章推荐
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
详解AngularJS中的依赖注入机制
Jun 17 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 Javascript
bootstrap下拉菜单使用方法解析
Jan 13 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
深入浅出了解Node.js Streams
May 27 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
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树的代码,可以嵌套任意层
2006/10/09 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
基于JQuery的密码强度验证代码
2010/03/01 Javascript
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
Express的路由详解
2015/12/10 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
JS实现闭包中的沙箱模式示例
2017/09/07 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
python线程优先级队列知识点总结
2021/02/28 Python
中科方德软件测试面试题
2016/04/21 面试题
数控技术专业推荐信
2013/11/01 职场文书
普通大学毕业生自荐信
2013/11/04 职场文书
学生感冒英文请假条
2014/02/04 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
老乡聚会通知
2015/04/23 职场文书
2015年手术室工作总结
2015/05/11 职场文书
如何写好开幕词?
2019/06/24 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
新手必备Python开发环境搭建教程
2021/05/28 Python
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle