window.location.hash(hash应用)---跳转到hash值制定的具体页面
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来调整显示页面。比如:
hash=(!window.location.hash)?"#search":window.location.hash;
window.location.hash=hash;
//调整地址栏地址,使前进、后退按钮能使用
switch(hash){
case "#search":
selectPanel("pnlSearch"); //显示普通搜索面板
break;
case "#advsearch":
case "#admin":
}
================================备注================================================
而popstate, 及相关api, pushState等属于HTML5新标准, 产生的目的就是做客户端前进后退的, 不仅可以支持hash, 非hash的同源url也支持.
所以一般用法是浏览器支持就用popstate, 不支持再降级使用hashchange,
window.location.hash(hash应用)---跳转到hash值制定的具体页面的更多相关文章
- 遇到问题-----JS中设置window.location.href跳转无效(在a标签里或这form表单里)
问题情况 JS中设置window.location.href跳转无效 代码如下: ? 1 2 3 4 5 6 7 8 <script type="text/javascript&quo ...
- javascript 中设置window.location.href跳转无效问题解决办法
javascript 中设置window.location.href跳转无效问题解决办法 问题情况 JS中设置window.location.href跳转无效 原因是 a标签的href跳转会执行在wi ...
- window.location.href跳转无效
window.location.href跳转无效 问题情况 JS中设置window.location.href跳转无效 原因是 a标签的href跳转会执行在window.location. ...
- window.location下的属性说明
属性 说明 window.location.href 完整的url window.location.protocol 协议 window.location.hostname 主机名 window.lo ...
- window.location和window.location.href和document.location的关系
1,首先来区分window.location和window.location.href. window.location.href是一个字符串. 而window.location是一个对象,包含属性有 ...
- window.loaction.href 不自动跳转的问题
window.location.href无效/不跳转的原因分析 1.源代码: <a href="javascript:void(0);" onclick="mo ...
- window.location.replace和window.location.href区别
有3个页面 a,b,c 如果当前页面是c页面,并且c页面是这样跳转过来的:a->b->c 1:b->c 是通过window.location.replace("..xx/c ...
- window.location.replace()与window.location.href()区别
有3个页面 a,b,c 如果当前页面是c页面,并且c页面是这样跳转过来的:a->b->c 1:b->c 是通过window.location.replace("..xx/c ...
- window.location.replace
有3个页面 a,b,c 如果当前页面是c页面,并且c页面是这样跳转过来的:a->b->c 1:b->c 是通过window.location.replace("..xx/c ...
随机推荐
- react 中 EventEmitter 事件总线机制
此机制可用于 react 中兄弟组件中的通信 npm install events -S 事件总线: // eventBus.js import {EventEmitter} from 'events ...
- springboot基于方法级别注解事务的多数据源切换问题
springBoot多数据源配置 配置读数据源 @Component @ConfigurationProperties(prefix = "jdbc.read") @Propert ...
- jira:恢复数据:AO_187CCC_SIDEBAR_LINK
JIRA 恢复数据时报错 ,关键词是找不到 AO_187CCC_SIDEBAR_LINK. 经网上查为 mysql connect jar 包 的版本过高所致. 降低版本后,成功导入数据.
- spring aop之父子容器
需求;项目对外提供接口,要求每个对外接口都要进行token认证. 解决办法:写一个token认证的工具类,在每个需要认证的接口方法开始的地方,调用工具类中的token认证方法. 问题:因为要满足指定条 ...
- [BZOJ 1535] [Luogu 3426]SZA-Template (KMP+fail树+双向链表)
[BZOJ 1535] [Luogu 3426]SZA-Template (KMP+fail树+双向链表) 题面 Byteasar 想在墙上涂一段很长的字符,他为了做这件事从字符的前面一段中截取了一段 ...
- RabbitMQ入门教程(四):工作队列(Work Queues)
原文:RabbitMQ入门教程(四):工作队列(Work Queues) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https:/ ...
- spring boot 是如何利用jackson进行反序列化的?
以下面的代码为例: @RestController public class HelloController { @RequestMapping("/") public BillS ...
- 15. AutoMapper 之映射继承(Mapping Inheritance)
https://www.jianshu.com/p/e4f05403bd13 映射继承(Mapping Inheritance) 映射继承有两个功能: 从基类或接口配置继承映射配置 运行时多态映射 继 ...
- 常见SMT极性元器件识别方法
极性元件在整个PCBA加工过程中需要特别注意,因为方向性的元件错误会导致批量性事故和整块PCBA板的失效,因此工程及生产人员了解SMT极性元件极为重要. 1.片式电阻(Resistor)无极性 2.电 ...
- 企业面试题|最常问的MySQL面试题集合(一)
问题1:char.varchar的区别是什么?varchar是变长而char的长度是固定的.如果你的内容是固定大小的,你会得到更好的性能. 问题2: TRUNCATE和DELETE的区别是什么?DEL ...