JavaScript有用的超鏈接

>您在那裡很樂意瀏覽一個網站；您單擊一個鏈接，突然發現自己在另一個網站上下載文件。那裡發生了什麼？煩人，不是嗎？必須有一種更好的方法向您的訪問者指示鏈接要去的地方以及哪種類型的文件。因此，為了幫助解決這個小小的煩惱，我寫了一些JavaScript和CSS，這些JavaScript和CSS在鏈接之後添加了很小的圖標（取決於文件擴展名和位置），以向用戶指示他們將要加載的文檔的類型。

>您可以在此處下載代碼，並查看示例。

>

鑰匙要點

>文章提供了JavaScript和CSS解決方案，可在超鏈接旁邊添加圖標，指示鏈接導致的文件類型或鏈接導致外部站點。該解決方案旨在通過提供清晰的視覺提示來增強用戶體驗。
• >該解決方案設計為簡單，易於使用，並且與包括IE6在內的所有現代瀏覽器兼容。當禁用CSS或JavaScript時，它會優雅地降低，並將文件使用限制為一個JavaScript文件和一個CSS文件。 >
該解決方案涉及創建JavaScript文件（ikonize.js）和CSS文件（ikonize.css）。 JavaScript文件確定每個超鏈接的文件擴展名，並添加適當的CSS類和圖標。 CSS文件包含圖標類。
• >
>解決方案有局限性：它不識別基於查詢字符串的導航鏈接，並且鏈接必須具有文件擴展名才能分配圖標（除非它是外部站點）。如果CSS被禁用，僅將顯示外部鏈接圖標，並且JavaScript被禁用，則頁面沒有可見的更改。
• 簡短

創建此功能時的主要考慮因素是：

>簡單性 - 必須易於使用

>
1. 優雅的退化 - 在CSS或/和JavaScript被禁用的情況下
最小使用文件 - 只有一個JavaScript和一個CSS文件

2. >
>使其盡可能地插入插件 - 因此可以快速添加到網站

限制代碼的整體量

4. 與所有現代瀏覽器（包括IE6

）的兼容性
5. >

為什麼要從僅CSS的解決方案轉移？
6. >
>您已經可以使用屬性選擇器在CSS中執行此操作。這是一個示例：

>那麼，當大多數現代瀏覽器都使用CSS顯示圖標時，您為什麼要使用腳本？

答案很簡單：IE6。所有體面的瀏覽器都支持CSS3屬性選擇器…除了IE6。 CSS的這一點腳本使IE6發揮得很好。實際上，它甚至可以在IE5.5。

靈感和信用

>在開始之前，我想承認Mark James在Famfamfam上的優秀和免費的絲綢圖標，我們將在本文中使用。

>

>此外，值得信用的信用：本文的靈感來自亞歷山大·凱撒（Alexander Kaiser）與CSS的Iconize TextLinks的啟發，這反過來又受到了CSS Guy與CSS展示超鏈接提示的啟發。此外，我使用了Sitepoint自己的詹姆斯·愛德華茲（James Edwards）撰寫的幾個出色的功能，還有一些從凱文·揚克（Kevin Yank）和卡梅倫·亞當斯（Cameron Adams）撰寫的核心JavaScript庫中，並在SitePoint Book中不朽，只需JavaScript。

那麼如何工作？

>

嗯，簡而言之：我們採用頁面中的所有鏈接，計算出鏈接到的文件擴展名，然後在鏈接之後添加適當的圖標。好的。

為使其全部起作用，涉及三個文件：

>

html頁麵包含鏈接，index.html
1. >
   css文件包含圖標類，ikonize.css

>將CSS類和圖標添加到鏈接的JavaScript文件，
快速啟動方法

現在，如果您想避開何處和位置，並且只想將其添加到您的頁面中，則是簡短的版本：

>在頁面標題中將鏈接添加到JavaScript和CSS文件（更改文件引用以適合您的站點設置）。

1. >
   
   
>將您的圖標文件夾放在您的網站上，並確保在ikonize.css文件中正確的URL引用。
>從腳本標籤中呼叫JavaScript函數ikonize在關閉的主體標籤之前包含的腳本標籤，例如：
2. >


3. 
   看到 - 我告訴過你這很容易使用！
為了簡單起見，我選擇了DOM加載後從HTML中調用該功能。還有其他方法可以使用JavaScript實現此目的，但它們超出了本文的範圍。

完整的說明

讓自己感到舒適，我們將深入研究內部的工作。

配置

>以保持簡單的精神，大多數設置已經為您完成。如果需要更改圖標或文件擴展名，則只需更改配置即可。有兩個可以進行這些更改的地方：JavaScript（ikonize.js）和CSS文件（ikonize.css）。

> configure ikonize.js

在文件頂部，您會看到所有配置變量：classprefix，classexternal和classiconloc。

哪些鏈接將收到圖標？

>

要定義鏈接所輸入的文件類型，我們將查看文件擴展名。文件類型分為兩組：具有唯一圖標的文件，例如洪流文件，以及將共享相同圖標但具有不同文件擴展名的那些圖標，例如flash文件（.fla和.swf）。

>分組分組的共享相同圖標的文件擴展名可以為您節省數百個CSS類和圖標。為了實現這一目標，我創建了兩個陣列。

>第一個數組，單個ClassArray，將所有鏈接的文件擴展包含單個圖標。 CSS類名稱的基礎與文件擴展名相同。也就是說，文本文件用“ txt”引用，CSS類名稱是ClassPrefix（較早設置）和“ TXT”基礎CSS類名稱，在這種情況下，將CSS類稱為“ IKON_TXT”。

第二個數組，ClassArray實際上是一個多維陣列，但不要讓您失望。基本上，這是根據我們想使用的圖標類型進行分組的一組單獨陣列。此數組中的第一個項目是單個ClassArray（此數組必須始終是第一個數組）。以下數組與先前的數組相似，其中一個重要區別：每個數組中的第一個項目是將要使用的CSS類的名稱，以下項目是需要該類的文件擴展名。在下面的示例中，.swf和.fla文件擴展名將與“ flash” CSS類關聯。

a[href$='.doc'] { <br>
  display: inline-block; <br>
  padding-left: 16px; <br>
  background: transparent url(images/icon_doc.gif) center right no-repeat; <br>
}

注意：文件擴展名排除點，即xls而不是.xls。

classPrefix is the prefix you want to give the individual CSS classes. Use this to prevent any conflicts with any existing CSS classes. The default is iKon_.

為了最大的可移植性，實際使用的CSS類名稱將具有一個前綴，例如“ ikon_”，我們先前配置了，但是在這些數組中，我們始終

>不包括前綴。 因此，Flash CSS類總是稱為“ flash”，而不是“ ikon_flash”。

>外部鏈接

>要確定鏈接是否是外部站點，我們需要知道當前頁面的主機名。

為此，我們使用：

>這是當前文檔的位置，並使用合格Href功能獲取域名，以確保我們具有完全合格的地址和Parseurl功能以獲取主機名。 （這兩個功能都是由我們的居民JavaScript Guru，BrotherCake撰寫的，並在他的博客文章中涵蓋了）。 稍後，當我們為外部鏈接添加類時，我們將使用此主機名來確定該鏈接是否在我們的網站外部。

實際上完成工作的代碼

>

classExternal is the name of the CSS class you want to use to show a link to an external site.

現在，我們需要使用document.getElementsbytagname（“ a”）從頁面中獲取所有鏈接，並確定鏈接的文件擴展。

我們通過再次使用parseurl並再次使用限定性來執行此操作。

首先，以a元素的href值：

linkhref = aelements [iv] .href;

接下來，解析值以獲取有關鏈接的更多信息：

> ourl = parseurl（premifyhref（linkHref））;

然後獲取鏈接的擴展名：
fileext = ourl.extension;

然後，我們需要循環瀏覽這些鏈接，並確定它們是否需要圖標。這就是它開始變得更加棘手的地方。我們需要循環遍歷分類及其包含的每個數組。我們通過在循環中運行循環來做到這一點。是的，這是一個循環，循環中的循環！ 這條毛茸茸的代碼看起來像這樣：

a[href$='.doc'] { <br>
  display: inline-block; <br>
  padding-left: 16px; <br>
  background: transparent url(images/icon_doc.gif) center right no-repeat; <br>
}

此鏈接是否需要圖標？

>

>要找出是否需要添加圖標，我們將將鏈接的文件擴展與數組中列出的每個擴展名進行比較。

classPrefix is the prefix you want to give the individual CSS classes. Use this to prevent any conflicts with any existing CSS classes. The default is iKon_.

classExternal is the name of the CSS class you want to use to show a link to an external site.

>鏈接到外部站點

>解決鏈接是否與外部站點的鏈接只是一種比較我們先前在配置區域中設置的URL確定的URL主機名的情況。 >

如果是真的，我們將在錨點中附加一個新的圖像元素，添加源和ID，然後為圖像添加一個alt and Title屬性。我們添加了額外的圖標，而不僅僅是分配一個類以清楚地表明此鏈接已列為另一個站點，並在圖標中添加標題和alt屬性。

externalIconLoc is the location of the image to use for the external icon.

>

CSS類

IndividualClassArray = Array('txt', 'xls', 'css', 'torrent');

現在回到CSS文件。

>

這是我們的CSS類，將圖標添加到.doc文件中。請注意，類名稱為“ ikon_”，然後是文件擴展名為“ doc”。該課程基本上在頂部和底部以及鏈接的右側放了一點填充物。然後，它將圖標的背景圖像添加到該空間中。

對於我們的外部鏈接圖標，我們將使用略有不同的類結構。我們添加一些填充頂部和底部以確保我們的圖標無邊界。

classArray = Array(  <br>
IndividualClassArray,  <br>
Array('flash', 'swf', 'fla')  <br>
);

>

如果您更改了ClassPrefix變量，請不要忘記更改這些類名稱以匹配。

url = parseURL(qualifyHREF(document.location.href)).hostname;

>

限制

>該鏈接必須具有文件擴展名才能將圖標分配給鏈接（除非是外部站點）。該腳本還無法識別基於查詢字符串的導航鏈接。如果CSS被禁用，則只會顯示外部鏈接圖標，如果禁用JavaScript，則頁面沒有可見的更改。

結論

ikonize是一種快速簡便的方法，可以在鏈接後添加視覺上有意義的圖標。該腳本在IE5.5中起作用，可以獨立於CSS3屬性選擇器工作。如您所料，該腳本降低了良好，並且很容易配置。希望您發現它有用！

>

>關於JavaScript中的超鏈接的常見問題

>如何使用JavaScript？

創建超鏈接，使用JavaScript創建超鏈接涉及操縱文檔對像模型（DOM）。您可以創建一個新的錨點元素，設置其HREF屬性，然後將其附加到文檔正文上。這是一個簡單的示例：

var link = document.createelement（'a''）;
link.href =“ https：//www.example.com”;
link.textContent =“ go xplox example.com”;我們要鏈接到的頁面的URL。然後，我們設置鏈接的文本，最後將鏈接附加到文檔正文。
>
>如何使用JavaScript？

更改超鏈接的目標？此屬性指定打開鏈接文檔的位置。可以將其設置為“ _blank”，以在新窗口或選項卡中打開文檔，“ _self”，以與單擊的同一幀打開文檔（默認為默認），“ _parent”，以在父幀中打開文檔，或在“ _top”中打開文檔，以在窗口的整體中打開文檔。以下是一個示例：

var link = document.createelement（'a''）;

link.href =“ https：//www.example.com”;
鏈接>屬性設置為“ _blank”，這意味著該鏈接將在新窗口或選項卡中打開。

>我如何使用JavaScript？
>使用“標題”屬性添加超鏈接標題。此屬性提供了有關鏈接的其他信息，例如鍊接文檔的名稱，並且當鼠標在鏈接上移動時通常以工具提示表示。以下是一個示例：

var link = document.createelement（'a''）;

link.href =“ https：//www.example.com”;

link.title =“ good example.com” to xpecess.com”; to示例設置為“轉到示例”，當鼠標在鏈接上移動時，將顯示為工具提示。

>

>如何使用JavaScript？
​​
如何使用“ removeChild”方法刪除超鏈接。此方法刪除了指定元素的指定子節點。這是一個示例：

var link = document.getElementById（'myLink'）;
link.parentnode.removechild（link）;
在此代碼中，我們首先通過其ID獲取鏈接元素，然後從其父節點中刪除它。

>如何使用JavaScript？

更改超鏈接的文本？此屬性設置或返回指定節點的文本內容及其所有後代。以下是一個示例：

var link = document.getElementById（'myLink'）;
link.textContent =“新鏈接text”;
在此代碼中，我們首先通過其ID獲取鏈接，然後將其文本內容更改為“新鏈接”。 “樣式”屬性。此屬性用於從元素添加，更改或刪除內聯樣式。這是一個示例：

var link = document.getElementById（'mylink'）;

link.style.color =“ red”;

link.style.style.fontsize =“ 20px”; 在此代碼中，我們首先通過其ID來獲得鏈接，然後更改其顏色，然後將其 pix。使用JavaScript？

>使用“ AddeventListener”方法將事件偵聽器添加到超鏈接中。此方法將事件處理程序附加到指定元素。以下是一個示例：

var link = document.getElementById（'myLink'）;

link.addeventListener（'click'click'，function（）{alert（'您單擊link！'link！''）;

}）;

}）;

}）; 在此代碼中，我們首先通過link exter a單擊“”事件，然後將事件連接到一個事件，然後將其附加到事件。當單擊鏈接時，將顯示一個警報框。
>
>如何防止超鏈接使用JavaScript使用JavaScript？
var link = document.getElementById（'myLink'）;
link.addeventListener（'click'click'，function（event）{

event.preventdefault（）元素通過其ID，然後將單擊事件偵聽器附加到它。當單擊鏈接時，它將不會遵循URL，並且將顯示一個警報框。

>

>如何創建一個使用JavaScript下載文件的超鏈接？

>

>

下載可以使用“下載”屬性創建文件的超鏈接。此屬性指定當用戶單擊超鏈接時，將下載目標。以下是一個示例：

var link = document.createelement（'a''）;

link.href =“ https://www.example.com/myfile.pdf"; link.download =” myfile.pdf =“ myfile.pdf” file“;document.body.body.appendchild（link）;

在此代碼中，我們首先創建一個新的錨點元素，然後將其HREF屬性設置為我們要下載的文件的URL。然後，我們將下載屬性設置為文件的名稱，最後將鏈接附加到文檔正文中。

>如何創建一個超鏈接，該超鏈接使用JavaScript打開電子郵件客戶端？

>可以使用HREF屬性中的“ MailTo：”協議創建電子郵件客戶端的超鏈接。該協議通過一條新消息打開用戶的電子郵件客戶端，可以發送。以下是一個示例：

var link = document.createelement（'a''）;
link.href =“ mailto：example@example.com”;
link.textcontent =“ emage me”; emage me';
document.body.body.body.appendchild.appendchild（link）; link）; link）; 我們首先創建一個新的錨點，然後設置其設置HER， “ mailto：example@example.com”。然後，我們設置了鏈接的文本，並最終將鏈接附加到文檔正文。

以上是JavaScript有用的超鏈接的詳細內容。更多資訊請關注PHP中文網其他相關文章！