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 相关文章推荐
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 Javascript
js加解密 脚本解密
Feb 22 Javascript
HTML5附件拖拽上传drop & google.gears实现代码
Apr 28 Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
jquery自动切换tabs选项卡的具体实现
Dec 24 Javascript
js实现同一页面多个运动效果的方法
Apr 10 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
Vue项目打包编译优化方案
Sep 16 Javascript
详解vue身份认证管理和租户管理
May 25 Vue.js
对 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
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
js select option对象小结
2013/12/20 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
python中set常用操作汇总
2016/06/30 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
使用python模拟高斯分布例子
2019/12/09 Python
python如何操作mysql
2020/08/17 Python
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
共筑中国梦演讲稿
2014/04/23 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
小学工作总结2015
2015/05/04 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
python实现监听键盘
2021/04/26 Python