window.location.hash 属性使用说明


Posted in Javascript onMarch 20, 2010

比如http://domain/#admin的location.hash="#admin"。利用这个属性值可以做一个非常有意义的事情。
很多人都喜欢收藏网页,以便于以后的浏览。不过对于Ajax页面来说的话,一般用一个页面来处理所有的事务,也就是说,如果你浏览到一个Ajax页面里边有意思的内容,想将它收藏起来,可是地址只有一个呀,下次你打开这个地址,还是得像以往一样不断地去点击网页,找到你钟情的那个页面。另外的话,浏览器上的“前进”“后退”按钮也会失效,这于很多习惯了传统页面的用户来说,是一个很大的使用障碍。
那么,怎么用location.hash来解决这两个问题呢?其实一点也不神秘。
比如,我的作者管理系统,主要功能有三个:普通搜索、高级搜索、后台管理,我分别给它们分配一个hash值:#search、#advsearch、#admin,在页面初始化的时候,通过window.location.hash来判断用户需要访问的页面,然后通过javascript来调整显示页面。比如:

var hash; 
hash=(!window.location.hash)?"#search":window.location.hash; 
window.location.hash=hash; 
//调整地址栏地址,使前进、后退按钮能使用 
switch(hash){ 
case "#search": 
selectPanel("pnlSearch"); //显示普通搜索面板 
break; 
case "#advsearch": 
case "#admin": 
}

通过window.location.hash=hash这个语句来调整地址栏的地址,使得浏览器里边的“前进”、“后退”按钮能正常使用(实质上欺骗了浏览器)。然后再根据hash值的不同来显示不同的面板(用户可以收藏对应的面板了),这就使得Ajax页面的浏览趋于传统化了。
Javascript 相关文章推荐
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
常规表格多表头查询示例
Feb 21 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
Javascript动画效果(2)
Oct 11 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 Javascript
详解Vue中使用Axios拦截器
Apr 22 Javascript
js实现数字跳动到指定数字
Aug 25 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 #Javascript
js 强制弹出窗口代码研究-又一款代码
Mar 20 #Javascript
js 数组克隆方法 小结
Mar 20 #Javascript
vs2003 js文件编码问题的解决方法
Mar 20 #Javascript
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 #Javascript
JavaScript 对象的属性和方法4种不同的类型
Mar 19 #Javascript
jQuery 前的按键判断代码
Mar 19 #Javascript
You might like
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
JS获取父节点方法
2009/08/20 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
用原生js做单页应用
2017/01/17 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
快速了解Python中的装饰器
2018/01/11 Python
学习python的前途 python挣钱
2019/02/27 Python
python 消费 kafka 数据教程
2019/12/21 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
python中关于数据类型的学习笔记
2020/07/19 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
研究生自我鉴定范文
2013/10/30 职场文书
销售部主管岗位职责
2013/12/18 职场文书
会计电算化学生个人的自我评价
2014/02/08 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
春季运动会加油词
2015/07/18 职场文书
Pandas加速代码之避免使用for循环
2021/05/30 Python