javascript之location详解

window.location.hash 使用表明

window.location.hash 使用表明

明日给我们详细汇总了有关window.location.hash的知识点,属性以及用法等等,十分的实用,并附着了例子,有亟待的伴儿可以参考下。

后天给我们详细汇总了有关window.location.hash的知识点,属性以及用法等等,非凡的实用,并附着了例子,有亟待的小伙伴能够参考下。

location是javascript里边管理地址栏的嵌入对象,比如location.href就管理页面包车型地铁url,用location.href=url就足以平昔将页面重定向url。而location.hash则足以用来获得或安装页面包车型地铁标签值。比如http://domain/\#admin的location.hash=”#admin”,利用那一个属性值能够做三个老大有意义的事体。

location是javascript里边管理地址栏的放到对象,比如location.href就管住页面包车型地铁url,用location.href=url就足以一向将页面重定向url。而location.hash则能够用来获取或安装页面包车型大巴标签值。比如http://domain/\#admin的location.hash=”#admin”,利用那么些属性值能够做叁个十二分有意义的业务。

 

 

window.location.hash不难应用

window.location.hash不难应用

一、#的涵义

一、#的涵义

#意味着网页中的二个岗位。其右面包车型地铁字符,正是该职责的标识符。比如,

#表示网页中的3个岗位。其右面包车型大巴字符,正是该职务的标识符。比如,

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

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

就代表网页index.html的print地点。浏览器读取这几个UCR-VL后,会自行将print地方滚动至可视区域。

就代表网页index.html的print地点。浏览器读取那几个UKugaL后,会自动将print地点滚动至可视区域。

为网页地点内定标识符,有七个主意。

为网页地点钦命标识符,有四个措施。

一是使用锚点,比如<a
name=”print”></a>,

1是运用锚点,比如<a
name=”print”></a>,

二是使用id属性,比如<div id=”print” >。

贰是接纳id属性,比如<div id=”print” >。

二、HTTP请求不包蕴#

二、HTTP请求不包蕴#

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

#是用来教导浏览器动作的,对劳动器端完全没用。所以,HTTP请求中不包括#。

例如,访问下边包车型地铁网站,

譬如,访问上边的网站,

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

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

浏览器实际爆发的乞求是这样的:

ca88官方会员登录,浏览器实际产生的伸手是那般的:

  GET /index.html HTTP/1.1

  GET /index.html HTTP/1.1

  Host: www.example.com

  Host: www.example.com

能够见见,只是请求index.html,根本未有”#print”的部分。

可以看出,只是请求index.html,根本未有”#print”的部分。

三、#后的字符

三、#后的字符

在率先个#末尾出现的此外字符,都会被浏览器解读为地方标识符。那象征,那几个字符都不会被发送到服务器端。

在率先个#背后现身的别的字符,都会被浏览器解读为地点标识符。这代表,这个字符都不会被发送到服务器端。

譬如说,下边ULacrosseL的原意是钦赐二个颜色值:

比如,上面U奥迪Q7L的原意是点名二个颜色值:

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

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

可是,浏览器实际发生的央浼是:

唯独,浏览器实际发生的伸手是:

  GET /?color= HTTP/1.1

  GET /?color= HTTP/1.1

  Host: www.example.com

  Host: www.example.com

能够见到,”#fff”被回顾了。唯有将#转码为%二三,浏览器才会将其看成实义字符处理。也正是说,上边的网站应该被写成:

可以见到,”#fff”被简单了。唯有将#转码为%贰叁,浏览器才会将其看成实义字符处理。也正是说,下边包车型大巴网站应该被写成:

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

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

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

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

只是改变#后的局地,浏览器只会滚动到相应地方,不会再度加载网页。比如,从

单单改变#后的有个别,浏览器只会滚动到对应岗位,不会再次加载网页。比如,从

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

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

改成

改成

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

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

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

浏览器不会再也向服务器请求index.html。

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

五、改变#会转移浏览器的拜会历史

每一次变动#后的1些,都会在浏览器的拜访历史中加进一个记下,使用”后退”按钮,就足以回来上3个地方

每叁回变动#后的壹对,都会在浏览器的造访历史中扩充五个记录,使用”后退”按钮,就能够重回上2个职位

那对于ajax应用程序尤其有用,能够用不一样的#值,表示差异的拜访状态,然后向用户给出能够访问有些状态的链接。

那对于ajax应用程序尤其有用,能够用差别的#值,表示不一样的造访状态,然后向用户给出可以访问有些状态的链接。

值得注意的是,上述规则对IE
陆和IE 7不树立,它们不会因为#的变动而充实历史记录。

值得注意的是,上述规则对IE
陆和IE 柒不成立,它们不会因为#的变更而充实历史记录。

六、window.location.hash读取#值

六、window.location.hash读取#值

window.location.hash那一个脾气可读可写。读取时,可以用来判定网页状态是或不是变动;写入时,则会在不重载网页的前提下,成立一条访问历史记录。

window.location.hash这性格情可读可写。读取时,能够用来判定网页状态是还是不是变动;写入时,则会在不重载网页的前提下,创设一条访问历史记录。

七、onhashchange事件

七、onhashchange事件

那是2个HTML 5新增的轩然大波,当#值发生变化时,就会触发那个事件。IE捌+、Firefox 3.6+、Chrome 5+、Safari 4.0+协理该事件。

那是1个HTML 伍新增的事件,当#值发生变化时,就会接触那个事件。IE八+、Firefox ③.陆+、Chrome 伍+、Safari 肆.0+援助该事件。

它的运用办法有三种:

它的使用方法有三种:

  window.onhashchange =
func;

  window.onhashchange =
func;

  <body
onhashchange=”func();”>

  <body
onhashchange=”func();”>

  window.addEventListener(“hashchange”,
func, false);

  window.addEventListener(“hashchange”,
func, false);

对于不协理onhashchange的浏览器,能够用setInterval监察和控制location.hash的变化。

对于不帮助onhashchange的浏览器,能够用setInterval监察和控制location.hash的变化。

八、Google抓取#的机制

八、Google抓取#的机制

暗许境况下,谷歌的互连网蜘蛛忽视U福睿斯L的#部分。

暗中认可情况下,谷歌的互连网蜘蛛忽视U君越L的#部分。

而是,Google还明显,要是您期望Ajax生成的剧情被浏览引擎读取,那么U宝马X3L中能够使用”#!”,谷歌会自动将其背后的始末转成查询字符串_escaped_fragment_的值。

而是,谷歌(Google)还规定,如若你希望Ajax生成的始末被浏览引擎读取,那么U昂科威L中得以使用”#!”,谷歌会自动将其后边的内容转成查询字符串_escaped_fragment_的值。

譬如,Google发现新版twitter的ULX570L如下:

比如说,谷歌(Google)发现新版twitter的U奇骏L如下:

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

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

就会活动抓取另二个UEnclaveL:

就会自动抓取另1个U福睿斯L:

  http://twitter.com/?\_escaped\_fragment\_=/username

  http://twitter.com/?\_escaped\_fragment\_=/username

因此那种机制,谷歌就能够索引动态的Ajax内容。香江尚学堂Java培训原创,请多多关切,陆续有web前端技术相关小说奉上!

由此那种机制,谷歌就足以索引动态的Ajax内容。Hong Kong尚学堂Java培训原创,请多多关心,陆续有web前端技术有关作品奉上!

 

 

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图