Niquelao » 網誌存檔 » 辨識連結類型

» 網誌存檔 » 辨識連結類型 Niquelao 辨識連結類型 2006年9月3日，由 Rumoroso 發表 一項對我們頁面的無障礙性與可用性有正面影響的良好做法，是根據連結的目的地來辨識網站中的連結類型。為此，除了採取相應的無障礙措施之外，我們還可以透過 CSS 建立樣式上的差異（始終力求維持一致性，讓連結能被辨識為連結）。透過這項做法，使用圖形化瀏覽器的使用者將能辨識他們即將存取的文件究竟是，比如說，一份 pdf，或者目的地是否位於我們的入口網站之外。 問題 我們必須透過一個類別（class）來辨識每一種連結類型，以便套用樣式。許多時候，插入連結的人是內容負責人，他們無權標記程式碼。 解決方案 透過一個以 javascript 撰寫的簡易函式，並以非侵入性的方式引入，我們便能根據「title」屬性的內容（若存在的話）和／或目標檔案的副檔名來辨識文件類型。 補充說明：內容編輯者／負責人採用共同的慣例，在連結的「title」屬性中標明連結目的地的類型，是一項良好的做法，因為大多數編輯工具都允許輸入該屬性。此外，此腳本還新增了一項功能：為那些沒有「title」屬性、且指向腳本本身可辨識文件的連結，加入一段文字到其「title」屬性中。 範例連結 Google pdf 格式文件 此連結沒有「title」屬性，透過該函式會為它加上： Word 檔案 腳本 腳本詳述如下，你可以直接下載 首先要宣告一個陣列，內含由編輯者／內容負責人輸入、用來描述連結目的地類型的文字片段： var tFormat = [“enlace externo”, “formato pdf”, “formato word”]; 我們宣告一種連結類型（依與前述相同的順序宣告）： var Format = [“externo”, “pdf”, “doc”]; 我們宣告用來格式化每種連結類型的類別（依與前述相同的順序宣告）。這些類別將在 CSS 中有對應的樣式： var classFormat = [“externo”, “pdf”, “doc”]; function enlaces() { // 選取文件中的所有連結 var links = document.getElementsByTagName(“a”); for (var i = 0; i < links.length; i++) { // 檢查它們不是錨點 if(links[i].href.indexOf(”.”) > -1) { // 檢查它們是否有「title」屬性 if(links[i].getAttribute(“title”)) { // 取得小寫的「title」屬性 var title = links[i].getAttribute(“title”).toLowerCase(); // 執行一個迴圈，檢查「title」中是否 // 含有 tFormat 陣列中所指出的其中一段文字。 // 若找到，就為它加上與該文字在 classFormat // 陣列中相同位置所宣告的類別 for(var f = 0; f < tFormat.length; f++) if(title.indexOf(tFormat[f]) > -1) links[i].className += ” ” + classFormat[f]; } // 由於並非所有連結都有「title」屬性 // 我們將以防萬一地檢查「href」屬性，取得 // 目標文件的副檔名，並將其與 Format 陣列中 // 所宣告的副檔名進行比對。 var ini = links[i].href.length-4; var fin = links[i].href.length; var wFormat = links[i].href.substring(ini,fin).toLowerCase(); for(var f = 0; f < Format.length; f++) if(wFormat.indexOf(Format[f]) > -1) { links[i].className += ” ” + classFormat[f]; // 若它沒有「title」屬性，就為它加上 if(!links[i].getAttribute(“title”)) links[i].setAttribute(“title”, tFormat[f]) } } } } 最後我們載入腳本： window.onload = enlaces; 辨識連結類型 分類：CSS、Javascript —> 2 則留言 Jorge del Casar 2007年5月14日 我讀你的網站讀了一會兒，印象相當深刻。你有非常有趣的東西，恭喜。由於我看到你反覆琢磨直到一切完美為止，我想向你做一點貢獻。你沒有考慮到，如果連結在腳本執行時已經標記了對應的類別，該類別會被重複。這沒什麼大不了的，但可以在一開始就檢查它是否擁有 Format 陣列中的某個類別，若是則跳到下一個元素，否則繼續執行腳本。這個 bug 似乎發生在範例連結「pdf 格式文件」上。再次恭喜你的優秀作品。希望很快能在这里看到更多內容。 附註：檢查一下 email 驗證，它不接受我的，可能是因為登入名稱帶了一個點（或重複的星號）。 Rumoroso 2007年5月14日 感謝你的貢獻。原則上該做的是修改這一行： if(title.indexOf(classFormat[f]) > -1) 改成這一行： if(title.indexOf(tFormat[f]) > -1 && links[i].className.indexOf(classFormat[f])) 我還沒測試過，但我猜想應該可行。關於 email 驗證的問題，我想應該是驗證器本身的問題。我會去看看。感謝你的貢獻。希望這不是唯一的一個。 你可以透過 RSS 2.0 feed 追蹤這些留言。你也可以從你的網站發送 trackback。 上一篇文章：交換 css 的腳本 下一篇文章：調整表單（第一集） —> —> —> 本作品採用 Creative Commons 授權條款 。

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.