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 函数调用规则
Aug 26 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
Apr 07 Javascript
JavaScript游戏之优化篇
Nov 08 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
Sep 18 Javascript
JS实现的数组去除重复数据算法小结
Nov 17 Javascript
详解node.js中的npm和webpack配置方法
Jan 21 Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
vue路由跳转传递参数的方式总结
May 10 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 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制作简单的内容采集器的原理分析
2008/10/01 PHP
php escape URL编码
2008/12/10 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
php数组合并的二种方法
2014/03/21 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
JavaScript类和继承 prototype属性
2010/09/03 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
Node.js获取前端ajax提交的request信息
2017/02/20 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
Python类的基础入门知识
2008/11/24 Python
Python中replace方法实例分析
2014/08/20 Python
python执行get提交的方法
2015/04/29 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
基于Python快速处理PDF表格数据
2020/06/03 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
canvas使用注意点总结
2013/07/19 HTML / CSS
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
求职简历推荐信范文
2013/12/02 职场文书
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
网络宣传方案
2014/03/15 职场文书
实习单位证明范例
2014/11/17 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
坎儿井导游词
2015/02/09 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python