window.location.hash 使用说明

今天给大家详细汇总了关于window.location.hash的知识点，属性以及用法等等，非常的实用，并附上了例子，有需要的小伙伴可以参考下。

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内容。上海尚学堂Java培训原创，请多多关注，陆续有web前端技术相关文章奉上！

javascript之location详解的更多相关文章

  1. JavaScript(4)---BOM详解

    JavaScript(4)---BOM详解 之前写过一篇有关DOM的博客:JavaScript(2)---DOM详解 DOM有个顶级对象叫:document.同样BOM中也有顶级对象叫 window. ...

  2. 从mixin到new和prototype：Javascript原型机制详解

    从mixin到new和prototype:Javascript原型机制详解   这是一篇markdown格式的文章,更好的阅读体验请访问我的github,移动端请访问我的博客 继承是为了实现方法的复用 ...

  3. JavaScript严格模式详解

    转载自阮一峰的博客 Javascript 严格模式详解   作者: 阮一峰 一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict m ...

  4. [转]javascript console 函数详解 js开发调试的利器

    javascript console 函数详解 js开发调试的利器   分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...

  5. javascript 节点属性详解

    javascript 节点属性详解 根据 DOM,html 文档中的每个成分都是一个节点 DOM 是这样规定的:整个文档是一个文档节点每个 html 标签是一个元素节点包含在于 html 元素中的文本 ...

  6. (" use strict")Javascript 严格模式详解

    Javascript 严格模式详解 转载别人的博客内容,浏览了一遍,没有全部吸收,先保存一下链接 http://www.ruanyifeng.com/blog/2013/01/javascript_s ...

  7. nginx入门与实战 安装 启动 配置nginx Nginx状态信息（status）配置 正向代理 反向代理 nginx语法之location详解

    nginx入门与实战 网站服务 想必我们大多数人都是通过访问网站而开始接触互联网的吧.我们平时访问的网站服务 就是 Web 网络服务,一般是指允许用户通过浏览器访问到互联网中各种资源的服务. Web ...

  8. 【HANA系列】SAP HANA XS使用JavaScript数据交互详解

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS使用Jav ...

  9. JavaScript运行机制详解

    JavaScript运行机制详解   var test = function(){ alert("test"); } var test2 = function(){ alert(& ...

随机推荐

  1. VSCode的使用

    前后端分离的,先打开vs,打开你的项目,在项目根目录中找到.vs文件加,找到.vs\config\applicationhost.config,然后打开找到你项目的IIS Express配置,例如:& ...

  2. python基础之Day20part2

    面向过程:核心是过程,解决问题的步骤,先干嘛后干嘛,机械流水线 复杂问题流程化简单化但扩展性差 面向对象:核心是对象,是特征与对象的集合体,基于该思想编写程序,就好比上帝造世界,上帝式的思维方式 扩展 ...

  3. kenlm的使用

    1.训练模型 install_path/bin/lmplz -o -S % -T /temp <text >text.arpa -o  表示n_gram 中的n(必选) -S  内存使用( ...

  4. angularjs ng-bind-html的用法总结

    angular中的$sanitize服务. 此服务依赖于ngSanitize模块.(这个模块需要加载angular-sanitize.js插件) 要学习这个服务,先要了解另一个指令: ng-bing- ...

  5. echarts使用踩坑实录之气泡图

    最近想做一个统计文章点击率,评论率和点赞率的功能,听说echarts可以轻易完成它,于是我就选择使用echarts,考虑到我做的模块上文章是没有分类的,所以我的统计是基于一个个点,这一看嘛,感觉散点图 ...

  6. C#中一些关联名词的含义归纳

    形参/实参:定义一个方法,方法中需要传输的参数为形参,实际调用方法时候传入的参数为实参. 方法/函数:两个没有本质上的区别,都是指类中的一些操作. 委托/事件:委托(delegate)是存有对某个方法 ...

  7. INTERVAL YEAR TO MONTH数据类型

    INTERVAL YEAR TO MONTH数据类型 Oracle语法: INTERVAL 'integer [- integer]' {YEAR | MONTH} [(precision)][TO ...

  8. CSS追加笔记

    box-shadow 属性向框添加一个或多个阴影. 语法 box-shadow: h-shadow v-shadow blur spread color inset;注释:box-shadow 向框添 ...

  9. (转载)python 命名.py 不能与模块相同，否则会报错

    在学习python网页爬虫时,测试requests的post方法进行表单提交时,命名.py文件为requests.py 代码如下: import requests params={'firstname ...

  10. 2019.03.28 bzoj3598: [Scoi2014]方伯伯的商场之旅（带权中位数+数位dp）

    传送门 题意咕咕咕自己读吧挺简单的 思路: 由带权中位数的性质可以得到对于每个数放在每个二进制位的代价一定是个单调或者单峰函数,因此我们先把所有的数都挪到第一个位置,然后依次向右枚举峰点(极值点)把能 ...