修订的绿色链接
4.90/5 (3投票s)
本文介绍了一种改进的方法，可以在用户将鼠标悬停在缩写词或首字母缩略词上时显示其定义。
引言
本文介绍了一种改进的方法，可以在用户将鼠标悬停在缩写词或首字母缩略词上时显示其定义。
背景
在之前的一篇 CodeProject 文章《绿色链接 - 揭示缩写词和首字母缩略词》中，作者之一 (gggustafson) 提出了一种方法，该方法使用一个带有 "green_link" 类的 <span> 标签，可以将其扩展为一个新类，该类可在用户将鼠标悬停在缩写词上时显示定义。
该方法存在一些困难：
<span>文本的语法很复杂，需要指定一个分隔符。如果未指定分隔符，则可能会出现意外的、可能不受欢迎的结果。- 如果网页阅读器未启用 JavaScript，则会显示
<span>标签中丑陋的内容。 - CSS 和 Javascript 文件都需要包含在 HTML 文档中。
<body>标签需要一个onload属性。
此修订版解决了这些问题，并且与原始方法向后兼容。它还支持另外两个 HTML 标签。
比较原始和修订版的绿色链接
原始的 "绿色链接" 只支持以下形式的 <span> 标签：
<span class="green_link">;Abbreviation;Definition</span>
此修订版还接受 <abbr> 和 <acronym> 标签，使用以下形式：
<abbr class="green_link" title="Definition">Abbreviation</abbr>
<acronym class="green_link" title="Definition">Abbreviation</acronym>
在绿色链接的 <span> 形式中，如果缺少分隔符，生成的网页可能会呈现不期望的外观。通过使用 <abbr> 和 <acronym> 标签，则没有分隔符。因此，标签得到了简化。此外，在可访问性方面有重大改进。如果未启用 JavaScript，<abbr> 和 <acronym> 标签会 "正常" 显示其内容，就像标签上没有 class="green_link" 属性一样。
修订版绿色链接只需要包含一个文件（JavaScript 文件）。JavaScript 文件动态创建了必要的样式表，因此无需包含外部样式表文件（CSS）。如果包含 GreenLinks.css 文件，此修订版方法将忽略它。
需要通过 <body> 标签的 onload 属性调用处理 revise_green_links 的 JavaScript 函数，如下所示：
<body onload="initialize_green_links();">
这不再需要了。JavaScript 现在包含一个自调用函数，可在页面加载时解析 HTML 页面的内容。
修订版绿色链接的工作原理
早期的绿色链接是通过通过 <body> 标签的 onload 属性调用 initialize_green_links 函数来执行的。在新版本中，此函数仍可以以这种方式调用；但是，这是不必要的。当 HTML 页面包含 JavaScript 文件 GreenLinks.js 时，以下匿名函数将在页面加载时自调用。
( function ( )
{
initialize_green_links ( );
} ) ( );
添加此匿名函数是为了使 <body> 标签的 onload 属性不必提供，但可以像绿色链接的早期版本那样提供。因此，修订版绿色链接是完全向后兼容的。尽管执行顺序在所有浏览器中不保证，但匿名函数通常会在 <body> 标签 onload 属性的任何目标之前执行。匿名函数调用 initialize_green_links。
function initialize_green_links ( )
{
var found = false;
// test the guard Boolean
if ( initialize_green_links_invoked )
{
// the anonymous function has
// probably been invoked, so
// this invocation is probably
// from an onload attribute
// that is attached to the
// <body> tag so return true
// so that the page will load
found = true;
}
else
{
// set the guard Boolean
initialize_green_links_invoked = true;
// create and fill the
// "green_links" array with
// nodes that are ACRONYM,
// ABBR and SPAN tags with a
// class of "green_link"
green_links = new Array ( );
green_links = elements_by_class_name ( 'green_link',
document,
'abbr' ).concat (
elements_by_class_name ( 'green_link',
document,
'acronym' ).concat (
elements_by_class_name ( 'green_link',
document,
'span' ) ) );
if ( green_links.length <= 0 )
{
// nothing to do - there are
// no Green Links in the
// document
}
else
{
if ( DYNAMICALLY_CREATE_STYLESHEET )
{
create_green_links_stylesheet ( );
}
abbreviation_alone_rule =
green_links_rule_retrieved (
'.green_link_abbreviation_alone' );
if ( abbreviation_alone_rule == undefined )
{
}
else
{
abbreviation_definition_rule =
green_links_rule_retrieved (
'.green_link_abbreviation_definition' );
if ( abbreviation_definition_rule == undefined )
{
}
else if ( !initialize_green_link_action ( ) )
{
}
else if ( !revise_green_links ( ) )
{
}
else
{
abbreviation_alone_rule.style.display = 'none';
abbreviation_definition_rule.style.display = 'inline';
found = true;
}
}
}
}
return ( found );
}
initialize_green_links 在调用后立即测试全局布尔标志的值。如果标志为 true，initialize_green_links 返回 true（如果 initialize_green_links 是通过 <body> 标签的 onload 属性调用的，则需要）。如果标志值不为 true，initialize_green_links 将全局布尔标志设置为 true，并执行以下操作：
- 收集所有类名为
green_link且标签为<abbr>、<acronym>或<span>的文档树节点，并按此顺序。 - 如果存在任何此类节点，则创建支持绿色链接的样式表。可以通过将全局变量
DYNAMICALLY_CREATE_STYLESHEET设置为 false 来抑制样式表的创建。在这种情况下，HTML 页面必须包含 GreenLinks.css 文件。（GreenLinks.css 包含在下载文件的 CSS 目录中。） - 查找
.green_link_abbreviation_alone和.green_link_abbreviation_definition规则，并将它们保存在全局变量中。这两条规则决定是否显示绿色链接。 - 如果找到这两个规则：
- 调用
initialize_green_link_action来创建和定位用于指定是否显示绿色链接的控件。它还建立事件处理程序来处理窗口和文档的onscroll事件。 - 调用
revise_green_links来处理文档中所有先前提到的绿色链接（即<abbr>、<acronym>和<span>）。 - 为
.green_link_abbreviation_alone和.green_link_abbreviation_definition规则分配默认值。
在处理绿色链接的过程中，添加了一个新功能。缩写词和定义被收集到一个字典中。对于以下任何形式的绿色链接，都会执行此操作：
1 <abbr class="green_link"
title="Tactical Receive Equipment">TRE</abbr>
2 <abbr class="green_link">TRE</abbr>
3 <acronym class="green_link">TRE</acronym>
4 <acronym class="green_link"
title="Tactical Receive Equipment">TRE</acronym>
5 <span class="green_link">;TRE;Tactical Receive Equipment</span>
6 <span class="green_link">TRE;Tactical Receive Equipment</span>
7 <span class="green_link">;TRE</span>
8 <span class="green_link">TRE</span>
请注意，一旦定义了缩写词，该定义将可用于页面上的所有其他绿色链接标签。例如，上面的第 1 行定义了 "TRE" 以供后续页面上出现的绿色链接实例使用（第 4、5、6 行也是如此）。这允许在页面中使用更短的绿色链接（例如，第 2、3、7、8 行）。当遇到完整的绿色链接时，将访问所有具有相同缩写词或首字母缩略词的先前绿色链接。如果发现这些绿色链接中的任何一个不完整，则不完整的绿色链接将被完全定义的绿色链接替换。
Using the Code
与原始的绿色链接需要四个步骤才能实现绿色链接效果不同，修订版的绿色链接只需要两步。
- 将 JavaScript 文件包含在 HTML 页面中。如前一篇文章所述，将 JavaScript 包含放在
</body>标签之前。 - 确定可能需要使用绿色链接的任何缩写词或首字母缩略词，并将其包装在绿色链接的一种形式中。
<script type="text/javascript" src="./Scripts/GreenLinks.js"></script>
</body>
</html>
<abbr class="green_link" title="Definition">Abbreviation or Initialism</abbr>
<acronym class="green_link" title="Definition">Abbreviation or Initialism</acronym>
<span class="green_link">;Abbreviation or Initialism;Definition</span>
请注意，class="green_link" 可能会导致错误 "The class or CssClass value is not defined."。此消息是由于类 "green_link" 将在动态创建的样式表中定义。如果您对此消息感到不适，可以在页面 <head> 部分添加以下内容作为解决方案：
<style type="text/css">
.green_link
{
}
</style>
结论
本文介绍了一种修订的、用于将缩写词和首字母缩略词展开为其定义的方法。
测试的浏览器
所有浏览器都产生了预期的结果。
历史
- 2011 年 11 月 13 日 - 原始文章。