利用 rel 属性与 JavaScript 实现标准兼容的新窗口链接

HTML标准中target属性的限制与替代方案

在HTML 4.0 Strict和XHTML 1.0 STRICT规范中，<a>标签内的target属性是被禁止使用的。这一规定常令网页设计者感到困扰，尽管在过渡型规范中该属性仍被允许。不过，通过特定的技术手段，我们可以有效解决这一兼容性问题。

HTML 4.0规范移除了target属性，但引入了rel属性，用于指定包含链接的文档与所链接文档之间的关系。规范中预定义了如next、previous、chapter、section等属性值，主要用于定义大型文档内部各部分间的关系。实际上，规范允许开发人员自由使用非标准属性值以满足特定需求。

在此方案中，我们采用自定义值external作为rel属性的值，以此标记那些需要在新窗口中打开的链接。

以下是不符合最新Web标准的传统链接代码示例：

<a href="document.html" target="_blank">external link</a>

改用rel属性的写法如下：

<a href="document.html" rel="external">external link</a>

利用JavaScript动态设置新窗口链接

现在，我们已经构建了一个符合Web标准的新窗口链接标记。接下来，需要运用JavaScript来实现实际的新窗口打开功能。脚本的核心任务是：在网页加载完成后，遍历文档中所有被标记为rel="external"的超链接。

浏览器兼容性检测与DOM遍历实现

首先，我们需要进行浏览器兼容性判断。

if (!document.getElementsByTagName) return;

getElementsByTagName是DOM 1标准中一个简单易用的方法，目前被大多数现代浏览器广泛支持。由于Netscape 4和IE 4等旧版浏览器不支持DOM 1，因此必须通过检测该方法是否存在来排除这些旧版本浏览器，确保脚本安全运行。

接下来，利用getElementsByTagName方法获取文档中所有的<a>标签：

var anchors = document.getElementsByTagName("a");

anchors变量被赋值为一个包含所有<a>标签的数组。随后，我们需要遍历该数组，并对符合条件的标签进行修改：

for (var i=0; i < anchors.length; i++) {

var anchor = anchors[i];

在循环中定位需要新窗口打开的<a>标签。

if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external")

接下来，为该链接建立target属性，并将其值设置为"_blank"：

anchor.target = "_blank";

以下是完整的实现代码：

function externalLinks() {
if (!document.getElementsByTagName)
return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
         }   
}   
window.onload = externalLinks;