快捷導(dǎo)航

js 彈出菜單/窗口效果

更新時(shí)間：2011年10月30日 20:06:53 作者：

想象一下，你把一個(gè)重要內(nèi)容放在一個(gè)彈出窗口，又不聚集到這個(gè)窗口。讓使用屏幕閱讀器的同學(xué)情何以堪，只有當(dāng)他們 tab 到這頁(yè)面結(jié)束，還繼續(xù) tab，才可能找到這個(gè)彈窗

是不是應(yīng)該為彈出菜單提供更好的可訪問(wèn)支持？這篇文章將涉及到3種常見(jiàn)的彈窗：

window.open 新建的瀏覽器窗口
<iframe /> 創(chuàng)建的窗口
頁(yè)面 DOM 創(chuàng)建的偽彈出窗口：如彈出 tips 等

一、當(dāng)頁(yè)面無(wú) JS 的時(shí)候
通常來(lái)說(shuō)，無(wú) JS 的情況那就按 HTML 的行為來(lái)做事。讓鏈接可以鏈接，就已經(jīng)解決。比較簡(jiǎn)單，我們簡(jiǎn)單帶過(guò)：

1. window.open 新建的瀏覽器窗口：盡量讓 JS 觸發(fā)器綁定在 <a /> 上，并把 a 鏈接到一個(gè)新的頁(yè)面，即可。

復(fù)制代碼代碼如下:

 
// 鏈接與 window.open 的目標(biāo)相同 
<a href="/target.html" target="_blank">[open window]</a> 
// 記得阻止鏈接有默認(rèn)行為，不然有 JS 的時(shí)候會(huì)打開(kāi)兩次 
window.open('./iframe.html', 'name', 'height=300,width=500'); 
return false; 

2. <iframe /> 創(chuàng)建的窗口：如果是用 JS 動(dòng)態(tài)創(chuàng)建的，那么記得觸發(fā)器也應(yīng)該像 window.open 的方法一樣，把解法鏈接寫(xiě)在一個(gè) <a /> 上，讓用戶通過(guò)鏈接來(lái)訪問(wèn)。而如果是隱藏的，那么盡量來(lái)使用 <noscript /> 來(lái)隱藏，再用 JS 讓其正常顯示出來(lái)；或者高度為 0 的空 iframe 。這樣即可保證在有 JS 的時(shí)候可用，而在無(wú) JS 的時(shí)候可以正常顯示。詳細(xì)應(yīng)用可以參照：支付寶新首頁(yè)的幾點(diǎn)前端實(shí)踐。

復(fù)制代碼代碼如下:

 
// 動(dòng)態(tài)創(chuàng)建，請(qǐng)盡量使用這種方法，因?yàn)?IE8 不能用 JS focus 到動(dòng)態(tài)創(chuàng)建的 focusable 元素 
// 而空 src 則請(qǐng)使用 javascript:'' 這種方式，因?yàn)檫@是解決性能的最好方式，詳見(jiàn)：空路徑對(duì)頁(yè)面性能影響的解決方案 

<a href="/target.html" target="_blank">[open iframe]</a> 
<iframe src="javascript:''" frameborder=0 id="theframe"></iframe> 
// js 
document.getElementById('theframe').src = '/target.html' 

3. 頁(yè)面 DOM 創(chuàng)建的偽彈出窗口：使用 <noscript /> 來(lái)隱藏。鏈接用錨點(diǎn)。

復(fù)制代碼代碼如下:

 
<a href="#target">[open current page DOM]</a> 
... 很多很多東西隔在中間 ... 
<noscript><div id="target">content</div></noscript> 

二、大多數(shù)情況下
大數(shù)多情況下，用戶的瀏覽器都是有開(kāi)啟 JS 的。而我們要做的是：focus 到彈出的窗口，并且第一個(gè) tab 就可以訪問(wèn)里面的內(nèi)容。聽(tīng)過(guò)來(lái)挺簡(jiǎn)單的，hub? 先看看 DEMO:

預(yù)覽：可訪問(wèn)彈出菜單/窗口

1. window.open 新建的瀏覽器窗口：focus 到新建的窗口即可。

復(fù)制代碼代碼如下:

 
// 引用自：QuickMode - popups 
function popitup(url) { 
newwindow=window.open(url,'name','height=200,width=150'); 
if (window.focus) { 
// focus 到新建窗口 
newwindow.focus(); 
} 
// 阻止觸發(fā)器的默認(rèn)行為 
return false; 
} 

2. <iframe /> 創(chuàng)建的窗口：調(diào)試了好久，IE8/9 需要等 iframe onload 成功后 setTimeout 來(lái) hack；firefox 不能使用 ifrcontentWindow.focus()，只能用 iframe.focus()。綜合起來(lái)需要這樣的代碼：

復(fù)制代碼代碼如下:

 
// for all except firefox 
setTimeout(function(){ 
f.contentWindow.focus(); 
}, 50); 

// hack for firefox 
navigator.userAgent.toLowerCase().indexOf('firefox') !== -1 && f.focus(); 

3. 頁(yè)面 DOM 創(chuàng)建的偽彈出窗口：對(duì)于 dom，除了 <a /> <input /> 等這些 focusable 元素（W3C SPEC），都是不可以 focus 的。那么當(dāng)需要 focus 到一個(gè) div 時(shí)，我們有什么方法可以做到呢？通常來(lái)說(shuō)，我們可以設(shè)置 Tabindex 來(lái)讓像 <div /> 這樣的非 focusable 元素可以觸發(fā) focus 事件。但我們想要的時(shí)真正 focus 到一個(gè)地方，以便于使用 tab 來(lái)訪問(wèn)這個(gè)區(qū)域的內(nèi)容，所以這種方法對(duì)我們等于無(wú)用。

目前還沒(méi)有比較好的方法（對(duì)于我能想到的和找到的），所以目前來(lái)說(shuō)，我們只能利用一個(gè) focusable 元素來(lái)創(chuàng)建 focus 目標(biāo)。我們可以這樣做：

<a href="#" class="getfocus">Get focus</a>
<input title="testing" />
但問(wèn)題是，對(duì)于這個(gè)鏈接對(duì)于我們來(lái)說(shuō)是毫無(wú)作用的，我們需要隱藏他，又能 focus 到。但 display:none 的時(shí)候是不能 focus 的。對(duì)于隱藏來(lái)說(shuō)，這里也不想說(shuō)太多。推薦看看這篇文章：使用clip隱藏內(nèi)容。那么我們可以這樣來(lái) hack 我們的這個(gè)鏈接：

復(fù)制代碼代碼如下:

 
// html: 注意用 hidefocus 來(lái)刪除虛線框 
<a href="#" class="getfocus" hidefocus>Get focus</a> 

// CSS: 使用 clip 
.getfocus{ 
position:relative; 
clip:rect(1px 1px 1px 1px); 
clip:rect(1px, 1px, 1px, 1px); 
} 

// javascript: 記得把 <a /> 放在這個(gè) DOM 結(jié)構(gòu)的最前面方便自上至下 tab 下去 
a.focus() 

三、總結(jié)：
至此，重要的技術(shù)實(shí)現(xiàn)點(diǎn)也已經(jīng)說(shuō)明白。代碼請(qǐng)見(jiàn)這個(gè)粗陋的 DEMO，雖然只是沒(méi)有特別優(yōu)化的一段代碼，但相信可以解決很多問(wèn)題。對(duì)于可訪問(wèn)性，我們要走的路還有很多。一點(diǎn)點(diǎn)來(lái)吧，從今天開(kāi)始。

您可能感興趣的文章: