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. magento form.html不显示 window 和 Linux下的区别

    window 无大小写区别,所以可以显示表框 Linux 大小写敏感,显示不了 \app\code\community\Company\BabyPay\Model\Payment.php 里定义了fo ...

  2. HTML笔记(一) 基础标签的介绍

    一个最基本的html文件,必须包含<html>, <head> 和<body> 三个标签 以及<!doctype>声明 1. <!DOCTYPE& ...

  3. linux whoami 显示当前用户的用户名

    [root@MongoDB ~]# whoami root

  4. 渗透测试环境搭建以及使用sqlmap获取mysql用户数据库密码

    通过sqlmap检测sql注入漏洞 安装SQLmap漏洞查看工具 安装渗透测试演练系统DVWA 使用SQLmap进行sql注入并获得后台管理员adnim帐号和密码 环境介绍 安装SQLmap:Rich ...

  5. tree_cuttting(树形dp求解树的重心)

    Tree Cutting After Farmer John realized that Bessie had installed a "tree-shaped" network ...

  6. python-day13(正式学习)

    闭包函数 闭包 闭包:闭是封闭(函数内部函数),包是包含(该内部函数对外部作用域而非全局作用域的变量的引用).闭包指的是:函数内部函数对外部作用域而非全局作用域的引用. 额...这里提示一下闭包!=自 ...

  7. 字符集详解 ASCII码、Unicode、UTF-8 (转)

    认识字符集 对于计算机而言,它仅认识两个0和1,不管是在内存中还是外部存储设备上,我们所看到的文字.图片.视频等等“数据”在计算机中都是已二进制形式存在的.不同字符对应二进制数的规则,就是字符的编码. ...

  8. 0-1-Tree CodeForces - 1156D (并查集)

    大意: 给定树, 边权为黑或白, 求所有有向路径条数, 满足每走过一条黑边后不会走白边. 这题比赛的时候想了个假算法, 还没发现..... 显然所求的路径要么全黑, 要么全白, 要么先全白后全黑, 所 ...

  9. 构造函数为何不能用abstract, static, final修饰

    不同于方法,构造器不能是abstract, static, final的. 1.构造器不是通过继承得到的,所以没有必要把它声明为final的. 2.同理,一个抽象的构造器将永远不会被实现,所以它也不能 ...

  10. 条件随机场CRF介绍

    链接:https://mp.weixin.qq.com/s/BEjj5zJG3QmxvQiqs8P4-w softmax CRF主要用于序列标注问题,可以简单理解为是给序列中的每一帧,既然是分类,很自 ...