javascript之location详解

作者:金沙城中心网址大全

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轻松应用

一、#的涵义

#javascript之location详解。代表网页中的三个职位。其右面包车型客车字符,就是该地点的标志符。举个例子,

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

javascript之location详解。就表示网页index.html的print地点。浏览器读取这几个U陆风X8L后,会自行将print地方滚动至可视区域。

为网页地点钦定标志符,有多少个方法。

一是选取锚点,比方<a name="print"></a>,

javascript之location详解。二是接受id属性,比方<div id="print" >。

二、HTTP诉求不包涵#

#是用来引导浏览器动作的,对服务器端完全没用。所以,HTTP乞请中不富含#。

javascript之location详解。比如说,访谈上面包车型客车网站,

  

javascript之location详解。浏览器实际产生的伸手是这么的:

  GET /index.html HTTP/1.1

  Host: www.example.com

能够看看,只是央求index.html,根本未曾"#print"的部分。

三、#后的字符

在首先个#末尾出现的其余字符,都会被浏览器解读为地方标识符。那表示,那么些字符都不会被发送到服务器端。

举个例子说,上面U奥德赛L的原意是钦点三个颜色值:

  

而是,浏览器实际发生的呼吁是:

  GET /?color= HTTP/1.1

  Host: www.example.com

能够看出,"#fff"被轻松了。独有将#转码为%23,浏览器才会将其充当实义字符管理。相当于说,下面的网站应该被写成:

  

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

单单更改#后的一些,浏览器只会滚动到相应地方,不会再一次加载网页。比如,从

  

改成

  

浏览器不会再也向服务器诉求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卡塔 尔(阿拉伯语:قطر‎的互连网蜘蛛忽略U君越L的#部分。

唯独,谷歌还分明,要是你希望Ajax生成的内容被浏览引擎读取,那么UEscortL中得以使用"#!",Google会自动将其后边的从头到尾的经过转成查询字符串_escaped_fragment_的值。

比方,Google开掘新版twitter的ULANDL如下:

  

就能够活动抓取另三个UOdysseyL:

  

经过这种机制,Google就足以索引动态的Ajax内容。法国巴黎尚学堂Java培训原创,请多多关怀,断断续续有web前端技巧相关随笔奉上!

 

本文由金沙城中心全部网址发布,转载请注明来源

关键词: