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. Linux中/etc下面passwd和shadow文件介绍

    1./etc/passwd root@root:~# cat /etc/passwd root:x:::root:/root:/bin/bash daemon:x:::daemon:/usr/sbin ...

  2. [转帖][Linux]systemd和sysV

    [Linux]systemd和sysV   转自:https://www.cnblogs.com/EasonJim/p/7168216.html 在Debian8中systemd和sysVinit同时 ...

  3. <<C++ Primer>> 术语表 (总) (待补充)

    术语表 目录 第 1 章 开始 第 I 部分 C++基础 第 2 章 变量和基本类型 第 3 章 字符串, 向量和数组 第 4 章 表达式 第 5 章 语句 第 6 章 函数 第 7 章 类 第 II ...

  4. 02: kubernetes安装

    参考官网:http://docs.kubernetes.org.cn/ 1.1 集群部署 1.集群结构 192.168.56.11 linux-node1 linux-node1.example.co ...

  5. centos 6.x 编译安装 pgsql 9.6

    文章结构如下: 一. 环境配置 1. 配置防火墙 查看IPTABLES 当前状态与关闭过程 chkconfig --list|grep iptables 关闭iptables service ipta ...

  6. Spring Boot缓存注解@Cacheable、@CacheEvict、@CachePut使用

    从3.1开始,Spring引入了对Cache的支持.其使用方法和原理都类似于Spring对事务管理的支持.Spring Cache是作用在方法上的,其核心思想是这样的:当我们在调用一个缓存方法时会把该 ...

  7. css实现两个div并排等高(一个div高度随另一个高度变化而变化)

    方法一.两个div都设置 display: table-cell; 方法二.父级div设置 display: -webkit-box;

  8. Linux上安装ElasticSearch及遇到的问题

    在Linux上安装ElasticSearch 1. 安装前环境准备 安装JDK环境,并配置环境变量,这里可以参考我以前写过的博客 https://www.cnblogs.com/ywb-article ...

  9. 【Java】 Java反射机制总结

    一.什么是反射 在运行状态中,对于任意一个类,都能够获取到这个类的所有属性和方法,对于任意一个对象,都能够调用它的任意一个方法和属性(包括私有的方法和属性),这种动态获取的信息以及动态调用对象的方法的 ...

  10. jfinal layui 多选传值问题整理

    使用layui在显示数据表格进行多选的时候遇到的几个问题: 1.增加监听,让你的数据表格可以进行复选. layui.use('table', function(){ var $ = layui.jqu ...