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

　　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的数据干扰。

评论总数：0 条 [ 查看全部 ] 网友评论