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 相关文章推荐
div失去焦点事件实现思路
Apr 22 Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 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
php gzip压缩输出的实现方法
2013/04/27 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
JavaScript高级程序设计
2006/12/29 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
JS对大量数据进行多重过滤的方法
2016/11/04 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
基于nodejs 的多页面爬虫实例代码
2017/05/31 NodeJs
js核心基础之构造函数constructor用法实例分析
2019/05/11 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
python操作redis的方法
2015/07/07 Python
bat和python批量重命名文件的实现代码
2016/05/19 Python
django之常用命令详解
2016/06/30 Python
浅析python中的分片与截断序列
2016/08/09 Python
python实现日常记账本小程序
2018/03/10 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
班长演讲稿范文
2014/04/24 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
PHP RabbitMQ消息列队
2022/05/11 PHP
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS