window.location.hash 使用说明

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


代码如下:

var hash;
hash = (!window.location.hash)?"#search":window.location.hash;
window.location.hash = hash;
//这里我们解释一下(!window.location.hash)什么意思?首先如果当前页面的地址栏的链接地址 不包含#....的这些的话,直接取值的话,他会为空!比如这个例子,http://www.jb51.net/直接取 alert(window.location.hash)//""空 转化为 boolean值 为 false
// 如果 http://www.jb51.net#hello,world直接取 alert(window.location.hash)//#hello,world 转化为 boolean值 为 true
//下面的就是 可以用switch判断
//调整地址栏地址，使前进、后退按钮能使用
switch(hash){
case "#search":
show("panel1");
break;
case "#advsearch":
show("panel2");
break;
case "#adminboss":
show("panel3");
break;
}

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

赞 (0)

相关推荐

  • window.location.hash 属性使用说明

    比如http://domain/#admin的location.hash="#admin".利用这个属性值可以做一个非常有意义的事情. 很多人都喜欢收藏网页,以便于以后的浏览.不过对于Ajax页面来说的话,一般用一个页面来处理所有的事务,也就是说,如果你浏览到一个Ajax页面里边有意思的内容,想将它收藏起来,可是地址只有一个呀,下次你打开这个地址,还是得像以往一样不断地去点击网页,找到你钟情的那个页面.另外的话,浏览器上的"前进""后退"按钮也会

  • window.location.hash知识汇总

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

  • 利用location.hash实现跨域iframe自适应

    页面域关系: 主页面a.html所属域A:www.jb51.net 被iframe的页面b.html所属域B:www.baidu.com,假设地址:http://www.baidu.com/b.html 实现效果: A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小. 问题本质: js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取

  • location.hash保存页面状态的技巧

    location.hash保存页面状态的技巧

    hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分). 语法 location.hash 在我们的项目中,有大量ajax查询表单+结果列表的页面,由于查询结果是ajax返回的,当用户点击列表的某一项进入详情页之后,再点击浏览器回退按钮返回ajax查询页面,这时大家都知道查询页面的表单和结果都回到了默认状态. 如果每次返回页面都要重新输入查询条件,或有甚者还得转到列表的第几页,那这种体验用户真的要抓狂了. 在我们的项目中,写了一个很简单的JavaScript基

  • window.location.hash 使用说明

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

  • window.location和document.location的区别分析

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

  • 详谈js中window.location.search的用法和作用

    详谈js中window.location.search的用法和作用

    用该属性获取页面 URL 地址: window.location 对象所包含的属性 属性 描述 hash 从井号 (#) 开始的 URL(锚) host 主机名和当前 URL 的端口号 hostname 当前 URL 的主机名 href 完整的 URL pathname 当前 URL 的路径部分 port 当前 URL 的端口号 protocol 当前 URL 的协议 search 从问号 (?) 开始的 URL(查询部分) 如图就是取出url中的参数. JS 脚本捕获页面 GET 方式请求的参

  • 小发现之浅谈location.search与location.hash的问题

    小发现之浅谈location.search与location.hash的问题

    背景 用过Vue Router的童鞋应该对路由传参的方式多多少少有些印象,Vue Router支持两种传参方式:query与params:其中query方式就是动态地在路由url后面追加参数,就是http的get请求方式:那Vue Router与location的search和hash有什么关系呢? 正题 首先我们先来看一下query方式传参 路由A // 跳转到detail路由页 let query = { name: abc, age: 23 } this.$router.push({nam

  • JavaScript window.location对象

    经常使用window.location,它的结构总是记不住,简单梳理下,方便以后查询. 示例 URL:http://b.a.com:88/index.php?name=kang&when=2011#first 属性 含义 值 protocol: 协议 "http:" hostname: 服务器的名字 "b.a.com" port: 端口 "88" pathname: URL中主机名后的部分 "/index.php" s

  • window.location 对象所包含的属性

    hash//从井号 (#) 开始的 URL(锚) host//主机名和当前 URL 的端口号 hostname//当前 URL 的主机名 href//完整的 URL pathname//当前 URL 的路径部分 port//当前 URL 的端口号 protocol//当前 URL 的协议 search//从问号 (?) 开始的 URL 要使用 JS 定位锚点,完全可以使用 window.hash 配合元素 ID 完成. 要使用 JS 捕获页面 GET 方式请求的参数,完全可以使用 window.

随机推荐