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

本文出自：http://ued.alimama.com/front-end/window-location-hash-test/

location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://ued.alimama.com#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=”http://static.alimama.com/js/mootools.js”></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的数据干扰。