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 相关文章推荐
关于js获取radio和select的属性并控制的代码
May 12 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
drag-and-drop实现图片浏览器预览
Aug 06 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
React如何实现浏览器打印部分内容详析
May 19 Javascript
使用flow来规范javascript的变量类型
Sep 12 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 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
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
PHP常用的小程序代码段
2015/11/14 PHP
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
JavaScript 私有成员分析
2009/01/13 Javascript
JS target与currentTarget区别说明
2011/08/28 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
Vue实现滑动拼图验证码功能
2019/09/15 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
Django中cookie的基本使用方法示例
2018/02/03 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
pycharm新建一个python工程步骤
2019/07/16 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
Python编写万花尺图案实例
2021/01/03 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
高中毕业自我鉴定
2013/12/22 职场文书
网上快餐厅创业计划书
2014/02/01 职场文书
幼儿教师工作感言
2014/02/14 职场文书
应届生求职信范文
2014/06/30 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
公司租车协议书
2015/01/29 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python