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 ...
随机推荐
- HTML笔记(一) 基础标签的介绍
一个最基本的html文件,必须包含<html>, <head> 和<body> 三个标签 以及<!doctype>声明 1. <!DOCTYPE& ...
- 洛谷P1600 天天爱跑步——题解
题目传送 首先要考虑入手点.先考虑一个一个玩家处理,显然不加优化的话,时间复杂度是O(n)的.发现对于玩家路径上的点都有一个观察员,一个都不能忽视,看起来是很难优化了.在做题时,发现一个思路很难想,就 ...
- win7启动tomcat失败处理
本地启动tomcat 后访问 127.0.0.1:8080 失败,查看错误如下 使用如下命令杀死占用8080的进程 netstat -ano | findstr 8080 # 查看8080端口状态 t ...
- python的类属性、实例属性、类方法、静态方法
类属性 就像如下代码: class Person: name = "张三" # 共有类属性 __age = 18 # 私有类属性 在类中直接定义的属性就是类属性,它被所有的实例对象 ...
- ubuntu下python3虚拟环境的配置
安装相关包 sudo pip3 install virtualenv # 虚拟环境包 sudo pip3 install virtualenvwrapper # 虚拟环境管理包 创建虚拟环境目录 su ...
- 记一次神奇的codeforces
今天有一场codeforces的div3,时间挺合适,于是就想打.结果发现rating超过1600就不能报名.虽然shzr好久不打CF了而且很菜,但是毕竟还是到了1600的,于是和ZUTTER_一起用 ...
- python2.7.5升级到2.7.14或者直接升级到3.6.4
python2.7.5升级到2.7.14 1.安装升级GCC yum install -y gcc* openssl openssl-devel ncurses-devel.x86_64 bzip2 ...
- 2018.09.07 最新cocoapods安装流程
这篇写在简书了,就不费力气搬了,给简书留一篇. https://www.jianshu.com/p/13bbbf804b71
- 006-Zabbix agent on Zabbix server is unreachable for 5 minutes
环境描述: 环境介绍:CentOS6.5 zabbix3.2.6(zabbix客户端与服务端在一台主机) 1.在安装完zabbix之后,添加客户端,客户端配置(zabbix_ag ...
- 性能测试:oprofile的学习使用
一.oprofile简介 Oprofile是linux上的性能监测工具,有人说是性能测试的神器.通过CPU硬件提供的性能计数器对事件进行采样,从代码层面分析程序的性能消耗情况,找出程序性能的问题点. ...