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": }

  通过window.location.hash=hash这个语句来调整地址栏的地址,使得浏览器里边的“前进”、“后退”按钮能正常使用(实质上欺骗了浏览器)。然后再根据hash值的不同来显示不同的面板(用户可以收藏对应的面板了),这就使得Ajax页面的浏览趋于传统化了。

window.location.hash属性介绍的更多相关文章

  1. location.hash属性介绍

    location.hash属性介绍 例如URL: http://wwww.a.com/index#rhythmk 通过location.hash 我们将获取到 #rhythmk. 默认浏览器会滚动至i ...

  2. window.location.hash

    我们知道JavaScript中很早就提供了window.history对象,利用history对象的forward().go().back()方法能够方便实现不同页面之间的前进.后退等这种导航功能.但 ...

  3. 一个简单的样例看明确怎样利用window.location.hash实现ajax操作时浏览器的前进/后退功能

    我们知道JavaScript中非常早就提供了window.history对象,利用history对象的forward().go().back()方法可以方便实现不同页面之间的前进.后退等这样的导航功能 ...

  4. window.location.hash 使用说明

    本文给大家详细汇总了关于window.location.hash的知识点,属性以及用法等等,非常的实用,并附上了例子,有需要的小伙伴可以参考下.   location是javascript里边管理地址 ...

  5. window.location.hash 页面跳转,精确定位,实例展示:

    window.location.hash 页面跳转,精确定位,实例展示: (1).index.phtml,页面用于传参 <script id="bb_list_template&quo ...

  6. js问题 window.location.hash和window.location.href有什么不同

    hash:设置或获取 href 属性中在井号“#”后面的分段. href:设置或获取整个 URL 为字符串. 通过下面的测试你会发现区别,将代码放到你的HTML中,然后用浏览器打开,测试步骤: 点击“ ...

  7. window.location.hash 使用

    [转]http://www.cnblogs.com/nifengs/p/5104763.html location是javascript里边管理地址栏的内置对象,比如location.href就管理页 ...

  8. window.location.hash在firefox下中文自动转码为UTF-8问题

    1.window.location.hash window.location.hash这个属性主要是读取和写入网页位置的,我们经常会用来控制网页单页面跳转或者是控制网页位置.然而这个属性在firefo ...

  9. 关于window.location.hash的理解及其应用(转)

    原文1:https://blog.csdn.net/zhuchuji/article/details/50736360 原文2(window.location.href和window.location ...

随机推荐

  1. 网易新闻RSS阅读器

    首先需要分析网易RSS订阅中心的网页布局情况. 网易RSS订阅中心:http://www.163.com/rss/ 你会发现RSS文件由一个<channel>元素及其子元素组成,除了频道本 ...

  2. CSS之边框属性

    border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式. border-style:dotted solid double dashed; border-style的属 ...

  3. 在Ubuntu下配置Apache多域名服务器

    1. 目标: 在本机 实现访问不同域名 可以访问不同的目录. 即:访问a.com 进入 /var/www/a 目录下的程序,访问b.com 进入/var/www/b目录下的程序. 2.遇到的问题: / ...

  4. 我眼中的go的语法特点

    因为基本从c#/javascript/c/c++/python/lua/action script,一路走来,对所有的C系列的语法既熟悉又有好感: 那在看语言的时候肯定会与C系列的东西进行类比,那就总 ...

  5. IOS-UI-UIDynamic(一)

    UIDynamic是从iOS7开始引入的技术 属于UIkit框架 可以模拟显示生活中的物理现象 如碰撞 抖动 摆动等 一. 使用UIDynamic步骤: 1.创建一个动力效果器UIDynamicAni ...

  6. C#对象XML序列化

    1.Xml序列化操作类 .Net Framework提供了对应的System.Xml.Seriazliation.XmlSerializer负责把对象序列化到XML,和从XML中反序列化为对象. 以下 ...

  7. 如何让Eclipse的智能提示像VS一样霸气

    说起来用 Eclipse 也有一段时间了,相信每一个用过的人都知道他的智能提示功能真的是糟糕透了,与 VisualStudio2008 简直不是一个档次的!我就纳闷了,他为什么不弄好一点呢!今天我实在 ...

  8. System.Windows.Forms.Timer

    一.主要属性.方法和事件 Windows 窗体 Timer 是定期引发事件的组件.该组件是为 Windows 窗体环境设计的. 时间间隔的长度由 Interval 属性定义,其值以毫秒为单位.若启用了 ...

  9. 使用git的正确姿势

    1.Windows上安装git:从https://git-for-windows.github.io下载msysgit. 2.linux(Debian或Ubuntu)安装git:sudo apt-ge ...

  10. OpenCV3读取视频或摄像头

    我们可以利用OpenCV读取视频文件或者摄像头的数据,将其保存为图像,以用于后期处理.下面的实例代码展示了简单的读取和显示操作: // This is a demo introduces you to ...