標示檔案連結類型的javascript

清楚標示網頁中連結檔案的類型，是近來網頁親和力（accessibility）與易用性（usability）的專家們，大力提倡的議題。雖然只要在連結元素（〈a〉）加上設定好的類別（class），便可以在這些連結旁邊顯示其檔案類別的圖示，但顯然手動逐一設定並不是個聰明的方法，javascript才是較好的解決方案。

這支javascript是由maratz.com的Marko Dugonjić所撰寫，不但可以在檔案連結旁顯示圖示，也會將這些檔案自動開啟在新視窗中。

以下是這段javascript的原始碼：

function fileLinks() {
    var fileLink;
    if (document.getElementsByTagName('a')) {
        for (var i = 0; (fileLink = document.getElementsByTagName('a')[i]); i++) {
            if (fileLink.href.indexOf('.pdf') != -1) {
                fileLink.setAttribute('target', '_blank');
                fileLink.className = 'pdfLink';
            }
            if (fileLink.href.indexOf('.doc') != -1) {
                fileLink.setAttribute('target', '_blank');
                fileLink.className = 'docLink';
            }
            if (fileLink.href.indexOf('.zip') != -1) {
                fileLink.setAttribute('target', '_blank');
                fileLink.className = 'zipLink';
            }
        }
    }
}
window.onload = function() {
    fileLinks();
}

整個原始碼的結構很簡單，就是依檔案連結的副檔名來加上開新視窗的屬性，以及對應之類別名稱，如pdfLink、docLink、zipLink。因此，當然還需要增加相應的css設定：

.pdfLink { padding-right: 19px; background: url(pdf.gif) no-repeat 100% .5em; }
.docLink { padding-right: 19px; background: url(doc.gif) no-repeat 100% .5em; }
.zipLink { padding-right: 17px; background: url(zip.gif) no-repeat 100% .5em; }

上述的css屬性值主要是依所採用的字體與icon大小來決定。在我的範例成品中，因為是使用Brand Spanking New設計的Doctype Icons，大小皆為16X16，而字體則是13px，因此我將背景圖片的垂直起使位置設定為0%（即將上面範例的.5em改為0%）。

依照上面的範例，使用者還可以增加各種檔案類型的設定，例如要標示PowerPoint檔案的連結，可在javascript的if條件後再增加一項：

if (fileLink.href.indexOf('.ppt') != -1) {
                fileLink.setAttribute('target', '_blank');
                fileLink.className = 'pptLink';
            }

並增加相應的css設定：

.pptLink { padding-right: 19px; background: url(圖示路徑) no-repeat 100% 0%; }

實作起來確實很容易，唯一的缺點在於，由於是直接辨認連結的檔名來判斷檔案類型，所以對於CMS（內容管理系統）產生的連結，如「?download=2387423&sid=8568347563」，便無法正確顯示了。

相關連結：
用 CSS 於連結後面加 icon (與副檔名相關小圖)

這篇文章發表於 November 18th, 2006 ，分類為：Webdev。你可以訂閱這篇文章的回應：RSS 2.0，也歡迎發表你的意見，或者從你的網站 Trackback 過來。