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 相关文章推荐
JavaScript 空位补零实现代码
Feb 26 Javascript
JS request函数 用来获取url参数
May 17 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
Jun 02 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
Javascript浅谈之this
Dec 17 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
May 11 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
基于element-ui的rules中正则表达式
Sep 04 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
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
vue实现放大镜效果
2020/09/17 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
python实现简单爬虫功能的示例
2016/10/24 Python
python实现斐波那契数列的方法示例
2017/01/12 Python
Django框架实现逆向解析url的方法
2018/07/04 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
学校后勤人员职责
2013/12/27 职场文书
初中三好学生事迹材料
2014/01/13 职场文书
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
小学生综合素质评语
2014/04/23 职场文书
大学新闻系自荐书
2014/05/31 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS