window.location.hash 属性使用说明_javascript技巧

比如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页面的浏览趋于传统化了。

时间: 2024-12-30 00:51:03

window.location.hash 属性使用说明_javascript技巧的相关文章

解决微信浏览器Javascript无法使用window.location.reload()刷新页面_javascript技巧

场景是这样子的,页面在初始化时有一个ajax请求,在页面上有一个按钮,点击的时候执行window.location.reload(),正常情况reload()后页面依然会向后台发出请求,但在安卓的微信浏览器中reoad后请求的一直是第一次打开页面时请求的数据.可以理解为请求被缓存了,但没有实测,也不知道是否是缓存. 解决方法是,使用window.location.href="window.location.href+随机数" 代替 window.location.reload().切记

window.location.hash 使用说明_javascript技巧

比如loation.href是 页面的url .但是 location.hash可以获取或设置页面的 标签值 比如http://domain/#testDemo中 咱们的location.hash 就是 #testDemo 下面引用一个 网上的demo 一个搜索版块,功能有3个:普通搜索,高级搜索,后台管理,分别指明他们各自的hash 值:#search,#advsearch,#adminboss. 在页面初始化的时候,通过window.location.hash来判断用户需要访问的页面,也就是

window.location和document.location的区别分析_javascript技巧

document.location 这个对象包含了当前URL的信息 location.host 获取port号 location.hostname 设置或获取主机名称 location.href 设置或获取整个URL location.port设置或获取URL的端口号 location.search 设置或获取href属性中跟在问号后面的部分 -----------------------------------------------------------------------------

window.location.hash知识汇总_基础知识

location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url.而location.hash则可以用来获取或设置页面的标签值.比如http://domain/的location.hash="#admin".利用这个属性值可以做一个非常有意义的事情. window.location.hash简单应用 一.#的涵义 #代表网页中的一个位置.其右面的字符,就是该位置的标识符.比

JavaScript Window浏览器对象模型方法与属性汇总_javascript技巧

Window 对象 所有浏览器都支持 window 对象.它表示浏览器窗口. 所有 JavaScript 全局对象.函数以及变量均自动成为 window 对象的成员. 全局变量是 window 对象的属性. 全局函数是 window 对象的方法. 1. open方法 语法格式: window.open(URL,窗口名称,窗口风格) 功能:打开一个新的窗口,并在窗口中装载指定URL地址的网页. 说明: open方法用于打开一个新的浏览器窗口,并在新窗口中装入一个指定的URL地址: open方法在打

JavaScript中的prototype使用说明_javascript技巧

1.prototype 在JavaScript中并没有类的概念,但JavaScript中的确可以实现重载,多态,继承.这些实现其实方法都可以用JavaScript中的引用和变量作用域结合prototype来解释. 2.简单的例子 复制代码 代码如下: var Blog = function( name, url ){ this.name = name; this.url = url; }; Blog.prototype.jumpurl = ''; Blog.prototype.jump = fu

js window.event对象详尽解析_javascript技巧

event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. 例子 下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转. <HTML> <HEAD><TITLE>Cancels Links</T

URL地址中的#符号使用说明_javascript技巧

一般我们想让一个a标签点击后执行javascript代码,有以下几种写法: 方式一:<a href="#" onclick="alert(1);">点击一</a> 这种方式的缺点就是点击后会在地址栏的URL后面加#号,同时把页面移动到顶部,一般不建议使用.方式二:<a href="javascript:void(0);" onclick="alert(1);">点击一</a> 这

javascript showModalDialog模态对话框使用说明_javascript技巧

1. 标准的方法 复制代码 代码如下: <script type="text/javascript"> function openWin(src, width, height, showScroll){ window.showModalDialog (src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeight:"+height+&