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实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
javascript三元运算符用法实例
Apr 16 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
JS实现京东商品分类侧边栏
Dec 11 Javascript
原生js实现九宫格拖拽换位
Jan 26 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
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
Python语言快速上手学习方法
2018/12/14 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
tensorflow常用函数API介绍
2020/04/19 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
Born鞋子官网:Born Shoes
2017/04/06 全球购物
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
2013年高中生自我评价
2013/10/23 职场文书
餐厅筹备计划书
2014/04/25 职场文书
爱护公物演讲稿
2014/09/09 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
2014年共青团工作总结
2014/12/10 职场文书
百年孤独读书笔记
2015/06/29 职场文书
活动宣传稿范文
2015/07/23 职场文书
小学校长开学致辞
2015/07/29 职场文书
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang