15.1.7　外部JavaScript文件中的不正确路径

当在一个外部JavaScript文件中使用文档相对路径的时候，和文件路径相关的另一个问题就会发生。例如，我们要创建了一个脚本来在页面上显示图像（就像一个幻灯片或者只是一个“随机显示当天图像”的脚本）。如果这个脚本使用了文档相对链接指向该图像，而我们把该脚本放入一个外部JavaScript文件的话，将会遇到麻烦。原因是：当一个外部JavaScript文件载入Web页面时，它的文档相对路径参照的是Web页面自身的位置。因此，包含在JavaScript文件中的任何文档相对的路径都必须相对于Web页面而不是相对于JavaScript文件。

这里有一个简单的例子可以说明这个问题。图15-2给出了一个非常简单的Web站点的结构。其中有两个Web页面（page.html和about.html）、4个目录（libs、images、pages和about）和一个外部JavaScript文件（images目录下的photp.jpg）。假设site_js.js文件引用了photo.jpg文件，可能是预载入该图像（参见7.1.2节）或者将其动态地显示于Web页面上。

从site_js.js文件的角度来看，到photo.jpg文件的一个文档相对路径是../images/photo.jpg（图15-2中的#1）。这个路径告诉浏览器退出libs目录（../），进入到images目录（images/）并且选择photo.jpg文件。然而，从page.html文件的角度，photo.jpg文件的路径只是images/photo.jpg（图15-2中的#2）。换句话说，同一张照片的路径对于两个文件来说是不同的。

如果我们想要在page.html文件中使用site_js.js脚本，那么，必须在site_js.js file文件中使用#2路径来引用photo.jpg的位置（也就是说，指定一个相对于page.html的路径）。同样，我们不能在位于站点的另一个目录下的一个Web页面中使用site_js.js，因为对于该文件来说，相对路径将有所不同（图15-2中的#3）。

有几种方法可以解决这个问题。首先，我们可以避免这种情况，不在JavaScript文件中列出到其他文件的路径。如果这么做了，可以使用根相对路径（参见1.2节），它对于站点的任何页面来说都是相同的。此外，可以在每个Web页面中定义到该文件的路径。例如，可以链接到外部JavaScript文件（参见1.2节），然后，在每个Web页面中定义变量来保存从当前页面到正确的文件的文档相对路径。

图　15-2　文档相对路径取决于路径开始的文件的位置，以及目标文件的位置。例如，从site_js.js文件到photo.jpg文件的文档相对路径（#1）是../images/photo.jpg；而从page.html文件到同一个文件的路径是images/photo.jpg（#2）；并且，从about.html到同一个文件的路径是../../images/photo.jpg（#3）

最后，我们可以使用类似于7.4节的幻灯片所使用的一种方法。路径来自Web页面并且嵌入页面上的链接中，JavaScript将该路径从HTML中提取出来。只要这些路径在HTML中有效，它们也会在脚本中有效。