window.location.hash知识汇总


Posted in Javascript onNovember 09, 2015

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

window.location.hash简单应用

一、#的涵义

#代表网页中的一个位置。其右面的字符,就是该位置的标识符。比如,

http://www.example.com/index.html#print

就代表网页index.html的print位置。浏览器读取这个URL后,会自动将print位置滚动至可视区域。

为网页位置指定标识符,有两个方法。一是使用锚点,比如<a name="print"></a>,二是使用id属性,比如<div id="print" >。

二、HTTP请求不包括#

#是用来指导浏览器动作的,对服务器端完全无用。所以,HTTP请求中不包括#。

比如,访问下面的网址,

http://www.example.com/index.html#print

浏览器实际发出的请求是这样的:

GET /index.html HTTP/1.1

Host: www.example.com

可以看到,只是请求index.html,根本没有"#print"的部分。

三、#后的字符

在第一个#后面出现的任何字符,都会被浏览器解读为位置标识符。这意味着,这些字符都不会被发送到服务器端。

比如,下面URL的原意是指定一个颜色值:

http://www.example.com/?color=#fff

但是,浏览器实际发出的请求是:

GET /?color= HTTP/1.1

Host: www.example.com

可以看到,"#fff"被省略了。只有将#转码为%23,浏览器才会将其作为实义字符处理。也就是说,上面的网址应该被写成:

http://example.com/?color=%23fff

四、改变#不触发网页重载

单单改变#后的部分,浏览器只会滚动到相应位置,不会重新加载网页。

比如,从

http://www.example.com/index.html#location1

改成

http://www.example.com/index.html#location2

浏览器不会重新向服务器请求index.html。

五、改变#会改变浏览器的访问历史

每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用"后退"按钮,就可以回到上一个位置。

这对于ajax应用程序特别有用,可以用不同的#值,表示不同的访问状态,然后向用户给出可以访问某个状态的链接。

值得注意的是,上述规则对IE 6和IE 7不成立,它们不会因为#的改变而增加历史记录。

六、window.location.hash读取#值

window.location.hash这个属性可读可写。读取时,可以用来判断网页状态是否改变;写入时,则会在不重载网页的前提下,创造一条访问历史记录。

七、onhashchange事件

这是一个HTML 5新增的事件,当#值发生变化时,就会触发这个事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件。

它的使用方法有三种:

window.onhashchange = func;

<body onhashchange="func();">

window.addEventListener("hashchange", func, false);

对于不支持onhashchange的浏览器,可以用setInterval监控location.hash的变化。

八、Google抓取#的机制

默认情况下,Google的网络蜘蛛忽视URL的#部分。

但是,Google还规定,如果你希望Ajax生成的内容被浏览引擎读取,那么URL中可以使用"#!",Google会自动将其后面的内容转成查询字符串_escaped_fragment_的值。

比如,Google发现新版twitter的URL如下:

http://twitter.com/#!/username

就会自动抓取另一个URL:

http://twitter.com/?_escaped_fragment_=/username

通过这种机制,Google就可以索引动态的Ajax内容。

我们再来看有网友遇到这样一个问题,如以下代码所示,每次点击页面上的按钮都将改变浏览器地址栏中的值,这样的话就可以欺骗到浏览器(并没有向服务器发送新的请求),使得它的“后退”和“前进”按钮可以用。 

    现在的问题是,在ie6+和ff3下浏览器的值都改变了,但是只有在ff3下“前进”和“后退”可以用,在ie下这两个都是灰色不可用的,请问为什么呢?

代码如下

<html> 
<head> 
<script type="text/javascript"> 
//每次点击都会调用test(),它会改变url的值 
var i=0; 
function test(){   
  window.location.hash=i; 
  i++;   
} 
</script> 
</head> 
<body> 
<input type="submit" value="xxxxxxxxxxxxx" onclick="test()"/> 
</body> 
</html>

下面就讲述一下hash结合ajax的使用,ajax每次取数据时页面更新后浏览器并不产生历史记录,也就是说后退和前进按钮失去应用的效用,这时可以结合hash和window.onhashchange来使用,注意ie6、7均不支持onhashchange,但可以用setInterval定期检查hash的改变,或者onload中检查的方法。

  具体实现:

<body>
  <div id="div1"></div>
  <input type="button" value="click" onclick="GetT()" /> 
</body>
</html>
<script type="text/javascript" src="js/AjaxHasPool.js">
</script>
<script type="text/javascript">
var ajax = new AjaxHasPool();
var method="get";
var url ="Handler.ashx";
var i = 1;
var obj = new Object();
function GetT()
{
  document.getElementById("div1").innerHTML=i; 
  ajax.Startup(null,url,method,ep);
}
function ep(xmlobj){
  eval("obj['"+i+"']="+i+";");
  location.hash="#"+i;
++i; 
}
window.onhashchange=function(){
var hashStr = location.hash.replace("#","");
if(typeof(eval("obj['"+hashStr+"']"))!="undefined") 
     document.getElementById("div1").innerHTML=eval("obj['"+hashStr+"']"); 
}
</script>

1.AjaxHasPool是自己封装的ajax类,其中的ajax.Startup()就是发送ajax请求;
2.Object对象保存历史记录,如果对象属性为数字的话,要用obj["1"]的方式来实例化,否者会违反命名规范。
3.在使用window.onhashchange检测hash值获取历史数据。

Javascript 相关文章推荐
Jquery插件之打造自定义的select标签
Nov 30 Javascript
jQuery滚动加载图片效果的实现
Mar 06 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
微信小程序Echarts覆盖正常组件问题解决
Jul 13 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
Aug 09 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
vue子传父关于.sync与$emit的实现
Nov 05 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
js删除指定位置超链接中含有百度与360的标题
Jan 06 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 #Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 #Javascript
JS实现兼容性较好的随屏滚动效果
Nov 09 #Javascript
初步了解javascript面向对象
Nov 09 #Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 #Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 #Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 #Javascript
You might like
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
使用 php4 加速 web 传输
2006/10/09 PHP
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
php cookie 详解使用实例
2016/11/03 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
js实现上传图片并显示图片名称
2019/12/18 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
django如何通过类视图使用装饰器
2019/07/24 Python
Python3运算符常见用法分析
2020/02/14 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
掌上明珠Java程序员面试总结
2016/02/23 面试题
综艺节目策划方案
2014/06/13 职场文书
社会实践活动总结范文
2014/07/03 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis