Niquelao » 博客档案 » 绑带提示识别

» Archivo del weblog » Identificando Tipos de enlace Niquelao Identificando Tipos de enlace 2006 年 9 月 3 日，由 Rumoroso 一种能够对页面的可访问性和可用性产生积极影响的良好实践，是根据链接的目的地来识别网站中链接的类型。为此，除了采取相应的可访问性措施外，我们还可以通过 CSS 创建不同的样式（始终尽量保持一致性，以便将链接识别为链接）。通过这种实践，使用图形浏览器的用户可以识别出他们将要访问的文档是否是 PDF 文件，或者目的地是否在我们的门户之外。问题：我们需要通过一个类来识别每种类型的链接，以便为其应用样式。在很多情况下，输入链接的人是内容负责人，他们没有权限修改代码。解决方案：通过一个简单的 JavaScript 函数，以非侵入方式引入，我们可以根据“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]; } // Dado que no siempre todos los enlaces tienen atributo “title” // compprobaremos, por si acaso, el atributo “href” obteniendo // la extensión del documento destino y comparándolo // con las declaradas en el array 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]) } } } } Finalmente cargamos el script: window.onload = enlaces;识别链接类型 类别：CSS, Javascript —> 2 条评论 Jorge del Casar 2007 年 5 月 14 日 我浏览你的网站有一会儿了，印象非常深刻。你有很多有趣的东西，祝贺你。看到你为了追求完美而反复推敲，我想给你一点建议。你没有考虑到如果链接已经标记了相应的类，执行脚本时该类会被重复添加。虽然没大碍，但可以在开始时检查是否已拥有 Format 数组中的类，如果是则跳到下一个元素，否则继续执行。这个 bug 似乎出现在“PDF 格式文档”示例链接中。再次祝贺你的出色工作。期待很快看到更多内容。PD：检查一下电子邮件验证，它不接受我的邮箱，可能是因为登录名中有点（或重复的星号）。传闻于 2007 年 5 月 14 日感谢您的支持。原则上，应该将该行：if(title.indexOf(classFormat[f]) > -1) 修改为：if(title.indexOf(tFormat[f]) > -1 && links[i].className.indexOf(classFormat[f]) == -1)。我没试过，但我想应该是可行的。关于电子邮件验证，我想应该是验证器本身的问题。我会查看的。谢谢你的贡献。希望这不会是唯一的建议。你可以通过 RSS 2.0 feed 跟踪评论。你也可以从你的网站发送 trackback。前面的文章：Script para intercambiar css 后面的文章：Retocando Formularios (episodio I) —> —> —> Esta obra está bajo una licencia de Creative Commons 。