本文给大家详细汇总了关于 window.location.hash 的知识点,属性以及用法等等,非常的实用,并附上了例子,有需要的小伙伴可以参考下。
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
location 是 javascript 里边管理地址栏的内置对象,比如 location.href 就管理页面的 url,用 location.href=url 就可以直接将页面重定向 url。而 location.hash 则可以用来获取或设置页面的标签值。比如 {aa10aa} 的 location.hash="#admin"。利用这个属性值可以做一个非常有意义的事情。
window.location.hash 简单应用
一、# 的涵义
#代表网页中的一个位置。其右面的字符,就是该位置的标识符。比如,
就代表网页 index.html 的 print 位置。浏览器读取这个 URL 后,会自动将 print 位置滚动至可视区域。
为网页位置指定标识符,有两个方法。一是使用锚点,比如 <a name="print"></a>,二是使用 id 属性,比如 <div id="print">。
二、HTTP 请求不包括#
#是用来指导浏览器动作的,对服务器端完全无用。所以,HTTP 请求中不包括 #。
比如,访问下面的网址,
浏览器实际发出的请求是这样的:
GET /index.html HTTP/1.1
Host: {aa7aa}
可以看到,只是请求 index.html,根本没有 "#print" 的部分。
三、# 后的字符
在第一个 #后面出现的任何字符,都会被浏览器解读为位置标识符。这意味着,这些字符都不会被发送到服务器端。
比如,下面 URL 的原意是指定一个颜色值:
但是,浏览器实际发出的请求是:
GET /?color= HTTP/1.1
Host: {aa5aa}
可以看到,"#fff" 被省略了。只有将 #转码为#,浏览器才会将其作为实义字符处理。也就是说,上面的网址应该被写成:
四、改变 #不触发网页重载
单单改变 #后的部分,浏览器只会滚动到相应位置,不会重新加载网页。
比如,从
改成
浏览器不会重新向服务器请求 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 如下:
就会自动抓取另一个 URL:
通过这种机制,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 值获取历史数据。
来源: http://www.phperz.com/article/17/0221/268817.html