window.location.hash 属性使用说明

 更新时间:2010年03月20日 22:43:49   作者:  
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页面的浏览趋于传统化了。

相关文章

  • CKEditor扩展插件:自动排版功能autoformat插件实现方法详解

    CKEditor扩展插件:自动排版功能autoformat插件实现方法详解

    这篇文章主要介绍了CKEditor扩展插件:自动排版功能autoformat插件实现方法,结合实例形式详细分析了CKEditor扩展插件实现自动排版功能的autoformat插件具体定义、配置与使用技巧,需要的朋友可以参考下
    2020-02-02
  • 实现两个文本框同时输入的实例

    实现两个文本框同时输入的实例

    下面小编就为大家带来一篇实现两个文本框同时输入的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JS Generator 函数的含义与用法实例总结

    JS Generator 函数的含义与用法实例总结

    这篇文章主要介绍了JS Generator 函数的含义与用法,结合实例形式总结分析了JS Generator 函数基本含义、用法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • JS高阶函数原理与用法实例分析

    JS高阶函数原理与用法实例分析

    这篇文章主要介绍了JS高阶函数原理与用法,结合实例形式分析了javascript函数式编程、一等函数、高阶函数等相关概念、原理及使用技巧,需要的朋友可以参考下
    2019-01-01
  • 通过隐藏iframe实现文件下载的js方法介绍

    通过隐藏iframe实现文件下载的js方法介绍

    本篇文章主要是对通过隐藏iframe实现文件下载的js方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • JS实现鼠标滑过折叠与展开菜单效果代码

    JS实现鼠标滑过折叠与展开菜单效果代码

    这篇文章主要介绍了JS实现鼠标滑过折叠与展开菜单效果代码,涉及JavaScript基于鼠标事件动态改变页面元素样式的相关实现技巧,非常具有实用价值,需要的朋友可以参考下
    2015-09-09
  • js实现右键菜单功能

    js实现右键菜单功能

    这篇文章主要为大家详细介绍了js实现右键菜单功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 详解TypeScript中枚举的使用

    详解TypeScript中枚举的使用

    枚举是 TypeScript 中一个非常有趣且实用的特性,它可以让我们更好地组织和管理代码,下面就来和大家聊聊TypeScript中枚举的具体使用吧
    2023-06-06
  • 按下回车键指向下一个位置的一个函数代码

    按下回车键指向下一个位置的一个函数代码

    本篇文章主要是对按下回车键指向下一个位置的一个函数代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • js中对象与对象创建方法的各种方法

    js中对象与对象创建方法的各种方法

    这篇文章主要给大家介绍了关于js中对象与对象创建方法的各种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-02-02

最新评论