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 相关文章推荐
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
快速了解Node中的Stream流是什么
Feb 13 Javascript
ES6箭头函数和扩展实例分析
May 23 Javascript
基于javascript的无缝滚动动画1
Aug 07 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
对 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编程网上资源导航
2006/10/09 PHP
基于PHP文件操作的详细诠释
2013/06/21 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
JavaScript 高级语法介绍
2009/06/15 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
iview同时验证多个表单问题总结
2018/09/29 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
python实现的jpg格式图片修复代码
2015/04/21 Python
Django中cookie的基本使用方法示例
2018/02/03 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
商务考察邀请函范文
2014/01/21 职场文书
副护士长竞聘演讲稿
2014/04/30 职场文书
公司晚会策划方案
2014/05/17 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
机关党员公开承诺书
2014/08/30 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
政府会议通知范文
2015/04/15 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
使用python绘制横竖条形图
2022/04/21 Python