location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如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":  
     
}
 
参考网址

================================备注================================================

hashchange是老API, 浏览器支持度高, 本来是用来监听hash变化的, 可以被利用来做客户端前进后退, 但应该不是这个API的存在的主要目的.
而popstate, 及相关api, pushState等属于HTML5新标准, 产生的目的就是做客户端前进后退的, 不仅可以支持hash, 非hash的同源url也支持.
所以一般用法是浏览器支持就用popstate, 不支持再降级使用hashchange, 
 

window.location.hash(hash应用)---跳转到hash值制定的具体页面的更多相关文章

  1. 遇到问题-----JS中设置window.location.href跳转无效(在a标签里或这form表单里)

    问题情况 JS中设置window.location.href跳转无效 代码如下: ? 1 2 3 4 5 6 7 8 <script type="text/javascript&quo ...

  2. javascript 中设置window.location.href跳转无效问题解决办法

    javascript 中设置window.location.href跳转无效问题解决办法 问题情况 JS中设置window.location.href跳转无效 原因是 a标签的href跳转会执行在wi ...

  3. window.location.href跳转无效

    window.location.href跳转无效     问题情况 JS中设置window.location.href跳转无效   原因是 a标签的href跳转会执行在window.location. ...

  4. window.location下的属性说明

    属性 说明 window.location.href 完整的url window.location.protocol 协议 window.location.hostname 主机名 window.lo ...

  5. window.location和window.location.href和document.location的关系

    1,首先来区分window.location和window.location.href. window.location.href是一个字符串. 而window.location是一个对象,包含属性有 ...

  6. window.loaction.href 不自动跳转的问题

    window.location.href无效/不跳转的原因分析   1.源代码: <a href="javascript:void(0);" onclick="mo ...

  7. window.location.replace和window.location.href区别

    有3个页面 a,b,c 如果当前页面是c页面,并且c页面是这样跳转过来的:a->b->c 1:b->c 是通过window.location.replace("..xx/c ...

  8. window.location.replace()与window.location.href()区别

    有3个页面 a,b,c 如果当前页面是c页面,并且c页面是这样跳转过来的:a->b->c 1:b->c 是通过window.location.replace("..xx/c ...

  9. window.location.replace

    有3个页面 a,b,c 如果当前页面是c页面,并且c页面是这样跳转过来的:a->b->c 1:b->c 是通过window.location.replace("..xx/c ...

随机推荐

  1. java script 的注释与分号

    // 单行注释 /**/多行注释 在js 中 变量.函数和操作符都是区分大小写的 什么是标识符 变量.函数.属性的名字.或者函数的参数. 变量的命名规范:不能以数字开头. 变量声明: var  nam ...

  2. 数据库SQL语句查询指定时间段内的数据

    [摘要]有的时候,我们需要查询数据库某段时间之间的数据,比如2016年5月1号到到5月3号之间用户注册数量(特殊节假日期间)等.那么用SQL语句如何实现呢? 首先,数据表中的存时间的字段比如是addt ...

  3. [ASP.NET] [JS] GridView点击高亮当前选择行,并在点击另一行时恢复上一选择行背景颜色

    在ASP.NET中的gridview控件里面可以通过设定其OnRowDataBound事件来进行实现高亮当前行的操作 前端控件的设置: 只要设置好OnRowDataBound属性即可,会自动在.cs文 ...

  4. git diff 命令用法

    理解git diff的前提,首先要理解git中工作区,暂存区,本地版本库的概念,如果头脑中有这些概念,接着往下读. git diff test.c 用来查看工作区和暂存区中test.c文件的区别. g ...

  5. windows 2008 创建域服务器问题 账户密码不符合要求

    windows 2008新建域时,本地administrator账户将成域Administrator账户.无法新建域,因为本地administrator账户密码不符合要求.*解决办法:很多人都会想到在 ...

  6. 剑指offer-丑数-穷举-python

    题目描述 把只包含质因子2.3和5的数称作丑数(Ugly Number).例如6.8都是丑数,但14不是,因为它包含质因子7. 习惯上我们把1当做是第一个丑数.求按从小到大的顺序的第N个丑数. 思路: ...

  7. jse中将数据反转

    public class test { public static void main(String args[]){ String arr[]={"1","2" ...

  8. 将div的内容生成清晰的PDF、高清PDF

    //需要引入html2canvas.js.jquery.js文件 html: <button type="button" class="btn btn-primar ...

  9. 如何申请百度小程序的appid(目前不支持个人账号申请)

    一.搜索百度智能小程序,并使用百度账号登陆 填写相关资料进入审核阶段,审核成功即可进入百度小程序开发者后台.打开“智能小程序首页”-“设置”-“开发设置”, 查看百度小程序的 AppID

  10. CentOS 7系统yum仓库搭建方法

    YUM: Yellowdog Update Modifier,rpm的前端程序,可解决软件包相关依赖性,可在多个库之间定位软件包,up2date的替代工具,是为了进一步简化RPM管理软件难度以及自动分 ...