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中文网其他相关文章！