8.2　在新窗口中打开外部链接

对于任何依靠访问者人数的站点来说，失去访问者是很可怕的。从广告收入赚钱的在线组织，如果可能的话绝不想把人们从他们的站点送走，电子商务站点也不希望通过让购物者单击链接离开其背后的站点而失去一个潜在客户；在展示一个完整站点的设计方案的时候，在一个潜在的客户浏览设计者刚完成的项目的时候，Web设计者可能不想让他离开这个站点。

很多站点这样来避免发生这些可怕的事情，在一个新的窗口中找开到另一个站点的链接。通过这种方式，当访问者完成浏览其他站点并关闭其窗口的时候，最初的站点仍然存在。HTML早已提供了一种方法做到这点，即使用一个链接的target属性，如果把这个属性设置为_blank, Web浏览器知道在新窗口打开该链接（或者，对于那些使用标签的浏览器来说，在一个新的标签页打开链接）。

注意：在Web可用性专家之间，确实存在一些关于打开新窗口的策略是好办法还是馊主意的争论。例如，参见www.useit.com/alertbox/990530.html。

对于指向站点之外的每个链接都手动地添加target="_blank"，这会花较长的时间，并且很容易忘记。幸运的是，使用JavaScript和jQuery，有一种快速且容易的方法来迫使Web浏览器在新的窗口或新的浏览器标签页中打开一个外部链接（或者是我们所希望的任何链接）。基本的过程很简单：

1.标识想要在新窗口中打开的链接。

在本章中，我们将使用一个jQuery选择器（参见4.6节）来标识这些链接。

2.为链接添加一个值为_blank的target属性。

你可能会想，“嘿，这是无效的HTML，我不能这么做”。首先，它只是对HTML 4.01和XHTML 1.0的严格版本来说无效，因此，对于其他的文档类型来说（包括对新的HTML 5 doctype），它是没问题的。其次，我们的页面将会仍然有效，因为一个HTML验证器（例如http：//validator.w3.org/）只能分析Web页面文件中真正的HTML代码，并且不识别JavaScript添加的任何HTML。最后，每种浏览器都理解target属性，因此，我们知道链接将在一个新窗口中打开，而不管是不是标准的严格文档类型。

使用jQuery，可以在一行代码中完成前面的两步：

$（'a[href^="http：//"]'）.attr（'target'，’_blank'）；

jQuery选择器$（'a[href^=http：//]'）使用一个属性选择器（参见4.6.2节）来识别以http：//开头的＜a＞标签（例如，http：//www.yahoo.com）。选择器识别了这些链接的所有类型，然后使用jQuery attr（）函数（参见4.9节）把每个链接的target属性设置为_blank。就是这样。

如果使用绝对路径来指定自己的站点上的一个文件，还需要其他步骤。例如，如果站点的地址是www.your_site.com，然后，链接到站点上的其他页面或文件，例如http：//www.your_site.com/a_page.html，那么，前面的代码也强迫这些链接在一个新的窗口中打开。如果没有为站点的每个页面打开一个新的窗口（你的访问者真可怜），则需要像下面这样编写代码：

var myURL=location.protocol+’//’+location.hostname；

$（'a[href^="http：//"]'）.not（'[href^="’+myURL+’"]'）.attr（'target'，’_blank'）；

这段代码首先为站点指定了URL，并且将其赋给了一个变量myURL。站点的URL通过浏览器窗口对象的帮助来完成。浏览器知道用来访问一个URL的协议，即http：，或者对于安全站点来说是https：。它存储在location对象的protocol属性中。同样，站点的名字（例如www.sawmac.com）存储在hostname属性中。因此，JavaScript代码location.protocol+’//’+location.hostname将产生一个诸如http：//www.sawmac.com的字符串。当然，这个例子中的主机名根据这段JavaScript代码所来自的页面而变化。例如，如果把这段代码放到了来自http：//www.your_site.com的页面上，那么，当某人浏览来自站点location.hostname的页面的时候，将会是www.your_site.com。代码的第2行以一个jQuery选择器开始，该选择器获取了以http：//开头的所有链接。那么，not（）函数删除了以你的URL开始的任何链接，在这个例子中，就是指向http：//www.sawmac.com的链接（not（）函数是排除来自一个jQuery选择的一些元素的一种有用方式，要了解其详细内容，请浏览http：//api.jquery.com/not）。

因此，要真正地在页面中使用这段代码，只需要链接到jQuery文件，添加$（document）.ready（）函数（参见5.4.1节），然后像下面这样插入前面的代码：

＜script src="js/jquery-1.6.3.min.js"＞＜/script＞

＜script＞

$（document）.ready（function（）{

var myURL=location.protocol+’//’+location.hostname；

$（'a[href^="http：//"]'）.not（'[href^="’+myURL+’"]'）.attr（'target'，’_blank'）；

}）；

＜/script＞

另一种方式可能就是创建一个外部JavaScript文件（参见1.2节），在该文件中，创建一个函数，该函数运行使得外部链接在新窗口中打开的代码。把这个文件附加到页面，然后在该页面上调用函数。

例如，可以使用如下的代码创建一个名为open_external.js的函数：

function openExt（）{

var myURL=location.protocol+’//’+location.hostname；

$（'a[href^="http：//"]'）.not（'[href^="’+myURL+’"]'）.attr（'target'，’_blank'）；

}

然后，把如下的代码添加到站点上想要应用这个函数的每个页面中：

＜script src="js/jquery-1.6.3.min.js"＞＜/script＞

＜script src="js/open_external.js"＞＜/script＞

＜script＞

$（document）.ready（function（）{

openExt（）；

//add any other JavaScript code to the page

}）；

＜/script＞

使用一个外部文件的优点是，如果在整个站点的成百的页面中使用这个函数，可以很容易地更新这个脚本以使它更有趣，例如，我们可以随后更改openExt（）函数，以便在当前页的同一框架中打开外部页面（参见8.4节了解如何做到这点）。换句话说，一个外部.js文件使得很容易让脚本在整个站点中保持一致。