window.location.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":
}
通过window.location.hash=hash这个语句来调整地址栏的地址,使得浏览器里边的“前进”、“后退”按钮能正常使用(实质上欺骗了浏览器)。然后再根据hash值的不同来显示不同的面板(用户可以收藏对应的面板了),这就使得Ajax页面的浏览趋于传统化了。
转载于:https://www.cnblogs.com/GoodPingGe/p/4921091.html
window.location.hash属性介绍相关推荐
- location.hash属性介绍
location.hash属性介绍 例如URL: http://wwww.a.com/index#rhythmk 通过location.hash 我们将获取到 #rhythmk. 默认浏览器会滚动至i ...
- JS BOM之location.hash详解
location.hash详解 去年9月,twitter改版. 一个显著变化,就是URL加入了"#!"符号.比如,改版前的用户主页网址为 http://twitter.com/us ...
- window.location获取url各项参数详解
window.location方法后还还可以带href,search等参数,下面我们来看看获取url各项参数的办法. URL即:统一资源定位符 (Uniform Resource Locator, U ...
- JS代码的window.location属性详解
如果你稍微懂一些JS代码,一般都会知道 window.location.href 这个属性.并且用该属性获取页面 URL 地址: window.location.href = window.locat ...
- 关于window.location可以获取的信息
window.location方法后还还可以带href,search等参数,下面我们来看看获取url各项参数的办法. URL即:统一资源定位符 (Uniform Resource Locator, U ...
- window.location操作url对象
URL即:统一资源定位符 (Uniform Resource Locator, URL) 完整的URL由这几个部分构成:scheme://host:port/path?query#fragment s ...
- ajax实现浏览器前进后退-location.hash与模拟iframe
为什么80%的码农都做不了架构师?>>> Aajx实现无数据刷新时,我们会遇到浏览器前进后退失效的问题以及URL不友好的问题. 实现方式有两种 1.支持onhashchange ...
- window.location和document.location的区别分析
用户不能改变document.location(因为这是当前显示文档的位置).但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而 ...
- 【JavaScript编程】window.location.search 返回值为空
一.Location 对象 window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面. 二.属性hash和search的区别 属性 描述 location.h ...
最新文章
- sklearn与pytorch模型的保存与读取
- python爬虫超时重试_Python爬虫实例(三):错误重试,超时处理
- jquery文本折叠
- CV报错:CAP_IMAGES: can‘t find starting number (in the name of file): x in function ‘icvExtractPattern‘
- 程序怎么启动vasp_构建可扩展的GPU加速应用程序(NVIDIA HPC)
- SAP CRM WebClient UI和Hybris CommerceUI tag的渲染逻辑
- 关于夏季及雷雨天气的MODEM、路由器使用注意事项
- 神经网络与深度学习——TensorFlow2.0实战(笔记)(四)(python异常处理)
- python邮箱配置_python flask mail QQ邮箱配置
- kali 安装grub theme
- java中的执行顺序_Java中的执行顺序
- 用pandas对分类变量作统计
- 电梯控制线路实训考核系统
- 目标2025:通信产业在能源变局中拥抱智能未来
- 买天猫网店转让成为电商创业新趋势
- linux没有i18n文件,【Linux】/etc/sysconfig/i18n文件详解
- php开发俄罗斯方块,HTML5+JS实现俄罗斯方块原理及具体步骤_html5教程技巧
- python 儿童 游戏_防止孩子玩游戏的Python小程序
- 请列举Nginx的一些特性
- 无线路由器变身无线交换机
热门文章
- SqlServer 对 数据类型 text 的操作
- 免费素材下载:超棒的摄影相关图标下载
- .net面向对象学习笔记
- 【Linux下Inotify + Rsync文件实时同步】
- 改变Tomcat的端口de方法
- Web前端JavaScript笔记(2)字符串
- 问题 D: 编写函数:比较字符串 之二 (Append Code)
- 蓝桥杯 省赛 python_第十一届蓝桥杯软件省级大赛第二场python3,类省赛,Python3
- rainmeter皮肤_关于雨滴桌面(rainmeter)中无界大神的仿WMP外星人播放器修改方案...
- python人工智能能干啥_人工智能首选什么语言 Python能做哪些事情