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 相关文章推荐
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
jquery实现盒子下拉效果示例代码
Sep 12 Javascript
jQuery取消ajax请求的方法
Jun 09 Javascript
Javascript连接Access数据库完整实例
Aug 03 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 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
在PHP中利用XML技术构造远程服务(上)
2006/10/09 PHP
php桌面中心(四) 数据显示
2007/03/11 PHP
mac下安装nginx和php
2013/11/04 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
Python 专题一 函数的基础知识
2017/03/16 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
python实现Virginia无密钥解密
2019/03/20 Python
Django框架自定义session处理操作示例
2019/05/27 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
python 生成器需注意的小问题
2020/09/29 Python
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
海外淘书首选:AbeBooks
2017/07/31 全球购物
Hotels.com越南:酒店预订
2019/10/29 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
以幸福为主题的活动方案
2014/08/22 职场文书
小学生校园广播稿
2014/09/28 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
2015政治思想表现评语
2015/03/25 职场文书
勇敢的心观后感
2015/06/09 职场文书
写好Python代码的几条重要技巧
2021/05/21 Python
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
java解析XML详解
2021/07/09 Java/Android
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers