`
77tt77
  • 浏览: 26508 次
  • 性别: Icon_minigender_1
  • 来自: Luna
社区版块
存档分类
最新评论

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来调整显示页面。比如:

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解析

    NULL 博文链接:https://hugang357.iteye.com/blog/1833003

    JavaScript使用HTML5的window.postMessage实现跨域通信例子

    利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限 3.Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信, 只要 在同一客户端就行,跨应用程序, 可以跨域。...

    107个常用javascript语句

    88.window.location的属性: protocol(http:),hostname( ("/a/a.html"),hash("#giantGizmo",指跳转到相应的锚记),href(全部的信息) 89.window.location.reload()刷新当前页面. 90.window.history.back()返回上一页,...

    javascript函数的解释

    88.window.location的属性: protocol(http:),hostname(www.example.com),port(80),host(www.example.com:80),pathname("/a/a.html"),hash("#giantGizmo",指跳转到相应的锚记),href(全部的信息) 89.window.location....

    详解vue 单页应用(spa)前端路由实现原理

    location.hash 下面就来介绍下这两种方式具体怎么实现的 一.history 1.history基本介绍 window.history 对象包含浏览器的历史,window.history 对象在编写时可不使用 window 这个前缀。history是实现SPA前端路由...

    [removed].hash 使用说明

    但是 location.hash可以获取或设置页面的 标签值 比如http://domain/#testDemo中 咱们的location.hash 就是 #testDemo 下面引用一个 网上的demo 一个搜索版块,功能有3个:普通搜索,高级搜索,后台管理,分别指明他们...

    location-origin.js:[removed].origin 的 Polyfill

    window . location . origin ; //=> "http://localhost:8888" 安装 包管理器 bower install location-origin npm install location-origin // You don't have to assign it to a variable. // It automatically ...

    javascript_高级编程

    9.26 hash 属性 9.27 Href 属性 9.28 pathname 属性 9.29 Protocol 属性 第10 章 history 对象 第11 章 layer 对象. 11.30 layer 属性. 11.31 layer 对象的方法 11.32 JavaScript 操作层 第12 章字符串对象...

    arc-reactor:基于框架的导航JavaScript框架,扩展了location.hash的window.pushstate。 包括用于Ajax,输入字段类型和DOM生成的有用工具

    介绍 Arc Reactor JS或Arc JS是一个功能强大的库,可简化单页应用程序和跨平台移动应用程序的开发。 这是用Vanilla JS制成的。 Arc Reactor JS用于2016年Tad Hack斯里兰卡优胜者项目Shilpa64,可在shilpa64.lk在线...

    vue-router中的hash和history两种模式的区别

    众所周知,vue-router有两种模式,hash模式和history模式,... let hash = location.hash.slice(1); document.body.style.color = hash; } 上面的代码可以通过改变hash来改变页面字体颜色,虽然没什么用,但是一定程度

    newMap地图

    /^\w+:\/\//.test(a)){var c=window.location,d=c.port?":"+c.port:"",e=c.protocol+"//"+c.host.split(":").shift()+d;if(a.indexOf("/")===0)a=e+a;else{var f=c.pathname.split("/");f.pop(),a=e+f.join("/")+"/...

    JSP 聊天室 chartroom

    window.location.hash="position"; } ()" background="images\4.jpg"> <!-- dataValue.jsp��������Ϣ����ݼ���ҳ��--> <iframe src="dataValue.jsp" id="dataValue" style="visibility:hidden; ...

    前端常见跨域解决方案(全).mht

    分享转载:前端常见跨域解决...3、 location.hash + iframe 4、 window.name + iframe跨域 5、 postMessage跨域 6、 跨域资源共享(CORS) 7、 nginx代理跨域 8、 nodejs中间件代理跨域 9、 WebSocket协议跨域

    cross-domain-practice:使用node.js在前端练习各种跨域方法

    本文利用node.js 实现前端...包含以下几种:1.cors 2.jsonp 3.window.name+iframe 4.location.hash+iframe 5.HTML5 postMessage 6.nginx 反向代理 7.node.js + express + http-proxy-middleware8.webSocket具体教程见

    javascript高级教程.pdf

    4.12 Window 窗口对象的属性 4.13 Window 窗口对象的方法 4.14 创建和关闭窗口 第5 章 document 对 象 5.15 document 对象的属性 5.16 document 对象的方法 第6 章 文 本 对 象 6.17 文本对象属性 6.18 文本对象的...

    front-end-router:这里我会通过两种方式实现前端路由(hash和historyapi),可能存在一定的兼容性

    我们可以通过 location 对象的hash属性获取当前哈希部分(如'#red'包括'#'号)。我们可以用 Array 和 Object 来实现浏览器的前进后退功能。具体原理可参见代码中的注释。h5路由通过在 window 对象上监听 popstate ...

    angularJs中跳转到指定的锚点实例($anchorScroll)

    依赖:$window $location $rootScope 使用:$anchorScroll([hash]);hash 将会指定元素滚动到的位置,如果省略参数,则将使用$location.hash() 作为默认值。 属性:number function(){} jqLite 如果设置了这个值,将...

    jquery1.9.1中文版

    // Prioritize #id over <tag> to avoid XSS via location.hash (#9521) // Strict HTML recognition (#11290: must start with <) rquickExpr = /^(?:(<[\w\W]+>)[^>]*|#([\w-]*))$/, //匹配一个独立的标签 ...

    jquery1.9.1中文汉化版

    // Prioritize #id over <tag> to avoid XSS via location.hash (#9521) // Strict HTML recognition (#11290: must start with <) rquickExpr = /^(?:(<[\w\W]+>)[^>]*|#([\w-]*))$/, //匹配一个独立的标签 ...

Global site tag (gtag.js) - Google Analytics