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中:first-child选择器用法实例
Dec 31 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
JavaScript面向对象分层思维全面解析
Nov 22 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
详解Angular-Cli中引用第三方库
May 21 Javascript
Vue computed计算属性的使用方法
Jul 14 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 Javascript
Layui数据表格之单元格编辑方式
Oct 26 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 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
php2html php生成静态页函数
2008/12/08 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
splice slice区别
2006/10/09 Javascript
学习ExtJS TextField常用方法
2009/10/07 Javascript
jquery 防止表单重复提交代码
2010/01/21 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
Python编写简单的HTML页面合并脚本
2016/07/11 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
python实现字符串加密成纯数字
2019/03/19 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
python实现图片二值化及灰度处理方式
2019/12/07 Python
python自动识别文本编码格式代码
2019/12/26 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
Python爬虫教程知识点总结
2020/10/19 Python
亚马逊印度站:Amazon.in
2017/10/15 全球购物
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
什么是网络协议
2016/04/07 面试题
网络信息管理员岗位职责
2014/01/05 职场文书
小学生操行评语
2014/04/22 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
团队队名口号大全
2014/06/06 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
音乐课外活动总结
2015/05/09 职场文书