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. Buffer对象与JSON对象相互转换

    > buffer=new Buffer('换汤不换药');<Buffer e6 88 91 e7 88 b1 e4 bd a0 ef bc 8c e7 89 a9 e7 90 86> ...

  2. excel常用公式--时间序列类

    year,month,day:返回对应于某个日期的年月日.Year作为1900 - 9999之间的整数返回. weekday:返回对应于某个日期的一周中的第几天. WEEKNUM:返回特定日期的周数. ...

  3. spring boot-9.对springMVC的支持

    1.thymeleaf spring boot 推荐的模板引擎是thymeleaf.spring boot 的自动配置已经默认配置好了themleaf,只要导入themleaf的Starter就可以了 ...

  4. 如何根据对象的属性,对集合(list / set)中的对象进行排序

      一:针对list 通过java.util.Collections的sort方法,有2个参数,第一个参数是list对象,第二个参数是new Comparator<对象类>(){}方法,这 ...

  5. WebService概念解释

    一句话概括什么是WebService   WebService是一种跨编程语言.跨操作系统平台的远程调用技术. 远程调用技术:远程调用是指一台设备上的程序A可以调用另一台设备上的方法B.比如:银联提供 ...

  6. C++:string操作函数

    要想使用标准C++中string类,必须要包含 #include <string>// 注意是<string>,不是<string.h>,带.h的是C语言中的头文件 ...

  7. PostgreSQL-事务与commit优化

    基本概念 事务 Transaction 是 数据库管理系统DBMS 执行过程中的一个逻辑单元,是一个 sql命令组成的序列. 其特点在于,当事务被提交DBMS后,DBMS需要确保所有的操作被完成:如果 ...

  8. vue-router的query和params的区别

    vue-router的query和params的区别 首先简单来说明一下$router和$route的区别 $router为VueRouter实例,想要导航到不同url,则使用$router.push ...

  9. 解决Asp.net Core中chtml文档中文乱码的问题

    原因 由于Visual Studio 2017在保存chtml时,文本格式非utf-8,所以导致中文会出现乱码情况. 解决办法 在工具->扩展与更新中添加插件"ForceUTF8 (w ...

  10. DSP、SSP、RTB、ADX(概念通俗解释)

    DSP:需求方平台 比如小米想要投放一个新机发布的广告,那么他想在各大网站如网易.新浪UC等地方投放这条新机信息,但他不可能一个一个的去谈,费时费财不说,效率非常低. 于是他就去了一个平台,把打广告的 ...