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 相关文章推荐
extJs 常用到的增,删,改,查操作代码
Dec 28 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
js变量以及其作用域详解
Jul 18 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 Javascript
npm 语义版本控制详解
Sep 10 Javascript
vue $mount 和 el的区别说明
Sep 11 Javascript
原生js实现自定义滚动条组件
Jan 20 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
MySQL相关说明
2007/01/15 PHP
初品cakephp 入门基础
2012/02/16 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
python中的字典使用分享
2016/07/31 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
Python理解递归的方法总结
2019/01/28 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
矿泉水广告词
2014/03/20 职场文书
投资合作协议书
2014/04/17 职场文书
会议欢迎词
2015/01/23 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
新闻稿件写作范文
2015/07/18 职场文书
JavaScript异步操作中串行和并行
2021/11/20 Javascript
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android