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 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
深入认识javascript中的eval函数
Nov 02 Javascript
纯js写的分页表格数据为json串
Feb 18 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 Javascript
Vue $attrs & inheritAttr实现button禁用效果案例
Dec 07 Vue.js
jquery自定义组件实例详解
Dec 31 jQuery
对 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取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
Angular.js之作用域scope'@','=','&'实例详解
2017/02/28 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
python机器学习实战之树回归详解
2017/12/20 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
快餐店的创业计划书范文
2014/01/29 职场文书
消防安全检查制度
2014/02/04 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年消防工作总结
2014/11/21 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
会计岗位工作总结
2015/08/12 职场文书
Django rest framework如何自定义用户表
2021/06/09 Python
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫