2.9 使用JavaScript改进链接

有时候，在用户点击链接之后，但是在浏览器转到链接的目的地之前，希望执行某种操作。典型的示例是，在用户进入站点上的特定页面之前发出警告，或者在用户离开你的站点时给出明确的提示。在这个示例中，我们将弹出一个警告对话框，然后再转到最终的目的地。脚本2-12显示HTML，脚本2-13显示需要对前面的脚本做的少量修改。

脚本2-12 与平常一样，HTML在link标签中包含JavaScript可以使用的id

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<head>

<title>Welcome to our site</title>

</script>

</head>

Hey, check out <a href="http:// www.pixel.mu/" id="redirect">my cat's Web site</a>.

</h2>

</body>

</html>

脚本2-13 链接改进脚本

window.onload = initAll;

function initAll() {

document.getElementById("redirect").onclick = initRedirect;

}

function initRedirect() {

alert("We are not responsible for the content of pages outside our site");

window.location = this;

return false;

}

改进链接的步骤如下：

(1) Hey, check out <a href="http://www.pixel.mu/" id="redirect"> my cat's Web site</a>.

脚本2-12中的这行代码显示链接，其中包括链接目的地的href和链接的id，脚本2-13将使用这个id。页面见图2-9。

图2-9 点击这个链接就会把用户重定向到我们的猫的Web站点

(2) alert("We are not responsible for the content of pages outside our site");

在点击链接之后，会显示这个警告，如图2-10所示。

图2-10 如果用户使用支持JavaScript的浏览器，那么会在离开站点时看到这个警告消息

(3) window.location = this;

这一行将浏览器窗口设置为关键字this指定的位置，this包含这个链接。目前，只需将this看作一个容器；在本书后面我们将会详细介绍它。如果你现在就想知道更多的信息，那么可以阅读第4章中的“this是什么”。当用户到达最终目的地时，页面像图2-11这样（至少，使用我们猫的网页作为目的地）。

图2-11 在这个示例中，这只猫的页面实际上是由我们维护的（你不会认为它自己会编写页面吧？）

_ü提示

q 你可能会注意到，代码中并没有引用特定的网页——这是this关键字的作用之一。this替我们完成的工作之一是从HTML链接获得URL（也就是a标签的href属性值）。由于采用了这种方式，如果以后将脚本2-12改为指向其他页面，就不必修改脚本2-13。实际上，可以让Web站点上的所有链接都调用这个相同的脚本，这一行代码都会自动地获得相应的href值。

q 如果前面的提示解释得还不够，可以这样考虑：按照这种方式，可以使用WYSIWYG编辑器修改你的HTML页面，而且修改者可以完全不了解JavaScript；只要他们只是修改HTML页面，他们就不会破坏你的脚本。

q 这对你来说还不够吗？还有一个好处：如果用户的浏览器不理解JavaScript，那么它只会装载HTML页面，而不显示警告。当他们点击链接时，会像一般情况下那样装载页面：不会发生错误，也不会提示“你必须换用其他浏览器”，没有任何问题。

q 这种编程方式称为无干扰脚本编程（unobtrusive scripting），它将代码与HTML分隔开，从而使这两者都更加灵活。如果想了解关于Web编程的更多术语，请阅读后面的“常见术语”。

【查看所有评论(0)条】