javascript 快顯功能表/視窗實現代碼

window.open 建立的瀏覽器視窗
<iframe /> 建立的視窗
頁面 DOM 建立的偽快顯視窗：如彈出 tips 等

一、當頁面無 JS 的時候
通常來說，無 JS 的情況那就按 HTML 的行為來做事。讓連結可以連結，就已經解決。比較簡單，我們簡單帶過：

1. window.open 建立的瀏覽器視窗：盡量讓 JS 觸發器綁定在 <a /> 上，並把 a 連結到一個新的頁面，即可。

// 連結與 window.open 的目標相同

代碼如下	複製代碼
<a href="/target.html" target="_blank">[open window]</a>

// 記得阻止連結有預設行為，不然有 JS 的時候會開啟兩次

代碼如下	複製代碼
window.open('./iframe.html', 'name', 'height=300,width=500'); return false;

 2. <iframe /> 建立的視窗：如果是用 JS 動態建立的，那麼記得觸發器也應該像 window.open 的方法一樣，把解法連結寫在一個 <a /> 上，讓使用者通過連結來訪問。而如果是隱藏的，那麼盡量來使用 <noscript /> 來隱藏，再用 JS 讓其正常顯示出來；或者高度為 0 的空 iframe 。這樣即可保證在有 JS 的時候可用，而在無 JS 的時候可以正常顯示。詳細應用可以參照：支付寶新首頁的幾點前端實踐。

// 動態建立，請盡量使用這種方法，因為 IE8 不能用 JS focus 到動態建立的 focusable 元素
// 而空 src 則請使用 javascript:'' 這種方式，因為這是解決效能的最好方式，詳見：空路徑對頁面效能影響的解決方案

代碼如下	複製代碼
<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. 頁面 DOM 建立的偽快顯視窗：使用 <noscript /> 來隱藏。連結用錨點。

代碼如下	複製代碼
<a href="#target">[open current page DOM]</a>

... 很多很多東西隔在中間 ...

代碼如下	複製代碼
<noscript><div id="target">content</div></noscript>

 二、大多數情況下
大數多情況下，使用者的瀏覽器都是有開啟 JS 的。而我們要做的是：focus 到彈出的視窗，並且第一個 tab 就可以訪問裡面的內容。聽過來挺簡單的，hub? 先看看 DEMO:

預覽：可訪問快顯功能表/視窗

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

代碼如下	複製代碼
// 引用自：QuickMode - popups function popitup(url) {     newwindow=window.open(url,'name','height=200,width=150');     if (window.focus) {         // focus 到建立視窗         newwindow.focus();     }     // 阻止觸發器的預設行為     return false; }

2. <iframe /> 建立的視窗：調試了好久，IE8/9 需要等 iframe onload 成功後 setTimeout 來 hack；firefox 不能使用 ifrcontentWindow.focus()，只能用 iframe.focus()。綜合起來需要這樣的代碼：

代碼如下	複製代碼
// for all except firefox setTimeout(function(){     f.contentWindow.focus(); }, 50); // hack for firefox navigator.userAgent.toLowerCase().indexOf('firefox') !== -1 && f.focus();

3. 頁面 DOM 建立的偽快顯視窗：對於 dom，除了 <a /> <input /> 等這些 focusable 元素（W3C SPEC），都是不可以 focus 的。那麼當需要 focus 到一個 div 時，我們有什麼方法可以做到呢？通常來說，我們可以設定 Tabindex 來讓像 <div /> 這樣的非 focusable 元素可以觸發 focus 事件。但我們想要的時真正 focus 到一個地方，以便於使用 tab 來訪問這個地區的內容，所以這種方法對我們等於無用。

目前還沒有比較好的方法（對於我能想到的和找到的），所以目前來說，我們只能利用一個 focusable 元素來建立 focus 目標。我們可以這樣做：

<a href="#" class="getfocus">Get focus</a>
<input title="testing" />
但問題是，對於這個連結對於我們來說是毫無作用的，我們需要隱藏他，又能 focus 到。但 display:none 的時候是不能 focus 的。對於隱藏 來說，這裡也不想說太多。推薦看看這篇文章：使用clip隱藏內容。那麼我們可以這樣來 hack 我們的這個連結：

代碼如下	複製代碼
// html: 注意用 hidefocus 來刪除虛線框 <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 /> 放在這個 DOM 結構的最前面方便自上至下 tab 下去
a.focus()
三、總結：
至此，重要的技術實現點也已經說明白。代碼請見這個粗陋的 DEMO，雖然只是沒有特別最佳化的一段代碼，但相信可以解決很多問題。對於可訪問性，我們要走的路還有很多。一點點來吧，從今天開始。