淘宝首页代码调整

1. 吊顶下拉菜单的键盘可用性改进

无障碍访问貌似最近比较火，大家都在聊，其中一块就是键盘的可访问性。我们在首页上作了些调整，让用户可以通过键盘访问到下拉菜单里的内容，希望小小的改进能够帮助到一些人。

实现方式不多解释，具体见代码：

var S = KISSY, DOM = S.DOM, Event = S.Event;var siteNav = DOM.get('#site-nav');var ulEl = DOM.get('#site-nav-bd ul');var linkEls = DOM.query('a', ulEl);var liEls = ul.getElementsByTagName('li');var menuEls = DOM.query('div.menu', ulEl);var searchLiEl = DOM.get('li.search', ulEl);var searchHdEl = DOM.get('span.menu-hd', searchLiEl);searchHdEl.setAttribute('tabIndex', 0);linkEls.push(searchHdEl);linkEls.push(DOM.get('header.top-header').getElementsByTagName('a')[0]);Event.on(linkEls, 'focus', function() {    var li = DOM.parent(this, 'li');    DOM.removeClass(liEls, 'hover');    DOM.addClass(li, 'hover');    if (DOM.hasClass(li, 'services') && DOM.html('#J_ServicesContainer') === '') {        KISSY.getScript('http://www.taobao.com/index_inc/2010c/includes/get-services.php?cb=__services_results');    }});Event.on(menuEls, 'mouseleave', function() {    DOM.removeClass(liEls, 'hover');});    Event.on(document.body, 'click', function() {    DOM.removeClass(liEls, 'hover');});

PS: 国外很多站点都作了类似处理：比如 Mozilla、Google，但国内好像不多见。

2. Flash 嵌入方法调整

源于小马提的一个 bug 反馈：在 IE 下没装 Flash 控件时，页面会出现大片空白。

乔花 MM 分析原因，反复测试后发现：

1. 没装 Flash 和装了 Flash 后禁用 Flash 的表现是不一致的，后者不会出现 bug 里描述的问题

2. 没装 Flash 时，如果用下面这种古老的 Flash 嵌入方法，浏览器会去请求 codebase 指定的地址，完了提示你安装 Flash
   

   <object        classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"        codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"        width="90" height="40">    <param name="movie" value="/file/UploadPic/20114/22/t1ovv6xbxkxxxxxxxx-62.swf">    <param name="wmode" value="transparent">    <embed wmode="transparent" src="https://img.aspxhome.com/file/UploadPic/20114/22/t1ovv6xbxkxxxxxxxx-62.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" width="90" height="40" type="application/x-shockwave-flash" wmode="transparent"/></object>

3. 如果 object 对象后跟一个内联脚本，则会阻塞后续资源的渲染和下载，直到 codebase 的请求完成。很悲剧，首页就这种情况；更悲剧的是，download.macromedia.com 的请求返回很慢 ...

4. 解决方式是换一种 Flash 嵌入方式，比如：

   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="90" height="40" class="holiday-logo">    <param name="movie" value="/file/UploadPic/20114/22/t1ovv6xbxkxxxxxxxx-62.swf">    <param name="wmode" value="transparent">    <!--[if !IE]>-->    <object type="application/x-shockwave-flash" data="/file/UploadPic/20114/22/t1ovv6xbxkxxxxxxxx-62.swf" width="90" height="40">        <param name="wmode" value="transparent">    </object>    <!--<![endif]--></object>

最后附上各种情况的测试页面：阻塞(问题页面)，不阻塞(问题已解决)。测试时请注意要：IE浏览器、卸载Flash和清空缓存。