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 + jquery实现定时修改文章标题
Mar 19 Javascript
jquery对table中各数据的增加、保存、删除操作示例
May 14 Javascript
Visual Studio中js调试的方法图解
Jun 30 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 Javascript
学习Angularjs分页指令
Jul 01 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
对 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 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
php实现简单的上传进度条
2015/11/17 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
Javascript中的window.event.keyCode使用介绍
2011/04/26 Javascript
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
原生JS运动实现轮播图
2021/01/02 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
Python生成随机MAC地址
2015/03/10 Python
讲解Python中运算符使用时的优先级
2015/05/14 Python
Python中字典的基本知识初步介绍
2015/05/21 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
Python2与Python3的区别实例分析
2019/04/11 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
解决Django中多条件查询的问题
2019/07/18 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
什么是Smart Navigation?
2016/07/03 面试题
《乡下孩子》教学反思
2014/04/17 职场文书
学生手册评语
2014/05/05 职场文书
环保倡议书500字
2014/05/15 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
2015年商场工作总结
2015/04/27 职场文书
2015年共青团工作总结
2015/05/15 职场文书
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技