位置:海鸟网 > IT > JavaScript >

window.location.hash的应用及浏览器的支持测试

  location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如#admin的location.hash=”#admin”,利用这个属性值可以实现很多效果。

  case one:锚点触发iframe的url更换

  html代码:

<dl id=”tbk_help_list”>
<dt>==成为淘宝客==</dt>
<dd><a href=”#faq_1_1″>什么是淘宝客推广?什么是淘宝客?</a></dd>
<dd><a href=”#faq_1_2″ id=”aaaa”>如何注册成为淘宝客?</a></dd>
<dt>==获取推广代码==</dt>
<dd><a href=”#faq_1_5″>获取单件商品推广代码</a></dd>
<dd><a href=”#faq_1_6″>获取一类商品推广代码</a></dd>
<dd><a href=”#faq_1_7″>获取推广组推广代码</a></dd>
<dd><a href=”#faq_1_8″>获取店铺推广代码</a></dd>
</dl>
<iframe src=”faq_1_1.html” frameborder=”0″ allowtransparency=”yes” scrolling=”auto” width=”700px” id=”contentFrame” name=”contentFrame” height=”600px”></iframe>

      javascript代码:

<script type=”text/javascript” src=””></script>
<script type=”text/javascript”>
//锚点触发iframe的url更换
var help_dd_a = $(”tbk_help_list”).getElements(”a”);
function geturl(hs){
var hash = hs ? hs : window.location.hash;
if(hash && hash.length >2){
hash = hash.substr(1);
}
var url = hash + “.html”;
window.frames['contentFrame'].location  = url;
}
help_dd_a.each(function(el){
el.addEvent(”click”,function(){
var str = this.href.substr(this.href.lastIndexOf(”#”));
geturl(str);
});
});
</script>


  案例截图,图1-1:

  

  case two:各种浏览器对window.location.hash的“前进”、“后退”功能是否支持

  说明:通过hash调整地址栏的地址,使得浏览器里边的“前进”、“后退”按钮能正常使用(实质上欺骗了浏览器)。然后再根据hash值的不同来显示不同的面板(用户可以收藏对应的面板了),这就使得Ajax页面的浏览趋于传统化了,但是,是否所有浏览器都支持hash的“前进”、“后退”功能呢?

  测试说明:点击图1-1中左栏目菜单,看地址栏的变化和iframe的url的变化来判断浏览器是否支持hash的“前进”、“后退”功能。

      

浏览器 iframe的url是否改变 地址栏hash值是否改变 是否支持

Mozilla Firefox3.0 改变 改变 支持

Google Chrome2.0 改变 改变 支持

IE6 改变 不改变 不支持

IE7 改变 不改变 不支持

IE8 改变 改变 支持

  ps:文中“所有浏览器”指列入测试范围的浏览器

  结果:除ie6及以下浏览器、ie7不支持外,其他浏览器都支持hash的“前进”、“后退”功能,同时看客们也发现所有浏览器iframe的url都改变了,那是因为所有浏览器都支持iframe的url缓存,这与hash的缓存不是一个概念,所以排除iframe的url的数据干扰。