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. Asp.Net MVC 路由 【转】

    原文链接:http://www.asp.net/learn/mvc/ 在这篇教程中,我将为你介绍每个ASP.NET MVC应用程序都具有的一个重要功能,称作ASP.NET路由(ASP.NET Rout ...

  2. Redis 命令 - Server

    BGREWRITEAOF Asynchronously rewrite the append-only file BGSAVE Asynchronously save the dataset to d ...

  3. iOS开发 中的代理实现

    iOS开发 中的代理实现 关于今天为什么要发这篇文字的原因:今天在和同事聊天的时候他跟我说项目中给他的block有时候不太能看的懂,让我尽量用代理写,好吧心累了,那就先从写个代理demo,防止以后他看 ...

  4. c# 远程回收IIS应用池

    利用下列代码可实现IIS应用池的远程回收 var serverManager = ServerManager.OpenRemote(ip); var appPools = serverManager. ...

  5. 使用python发送Email

    import smtplib from email.mime.text import MIMEText def SendEmail(): email = "" #设置收件地址 ma ...

  6. UVaOJ 120 - Stacks of Flapjacks

    120 - Stacks of Flapjacks 题目看了半天......英语啊!!! 好久没做题...循环输入数字都搞了半天...罪过啊!!! 还是C方便一点...其实C++应该更方便的...C+ ...

  7. 完美高仿精仿京东商城手机客户端android版源码

    完美高仿精仿京东商城手机客户端android版源码,是从安卓教程网那边转载过来的,这款应用源码非常不错的,也是一个非常优秀的应用源码的,希望能够帮到学习的朋友. _js_op> <igno ...

  8. phpcms常用接口调用方法

    常用函数 , 打开include/global.func.php,下面存放一些公共函数 view plaincopy to clipboardprint?function str_charset($i ...

  9. php正确解码javascript中通过escape编码后的字符

    js的escape如何在PHP中来解呢? 下面的这个函数可以正确的解析,网上有不少unescape的函数,但好用的不多. 这是很久以前收集的一个,不知道谁写的了,但经过测试没有问题~ function ...

  10. jdbc学习(一)——SqlServer、Oracle和MySQL

    一.jdbc介绍 jdbc全称:java数据库连接(Java Database Connectivity),是sun公司定义的一套访问数据库的规范(接口和类,由各种数据库公司进行实现),主要放在jav ...