如何正确处理外部 JavaScript 文件中的相对路径？

JavaScript 外部文件中的相对路径

在 JavaScript 中，根据是否在 JavaScript 中指定路径，对外部文件中的相对路径进行不同的解释。相同目录或不同目录。

相对于页面

当使用 <script> 将外部 JavaScript 文件包含在页面中时标签，该文件中指定的路径是相对于页面目录的。例如，在提供的文件夹结构中，图像filters_expand.jpg的路径应为myjsfile.js文件中的../Images/filters_expand.jpg。</script>

相对于JavaScript文件

但是，如果图像的路径指定在与 JavaScript 文件不同的目录中，则需要使用../../[图像路径]。这是因为 JavaScript 文件与 images 文件夹不在同一目录中。

解决方案

建议的解决方案是创建一个存储根路径的全局变量Web 应用程序的。可以使用返回页面目录路径的函数来分配此变量。例如：

var rootPath = function() {
  var scripts = document.getElementsByTagName("script");
  var currentScript = scripts[scripts.length - 1];
  return currentScript.src.substring(0, currentScript.src.lastIndexOf("/") + 1);
}();

一旦有了根路径，就可以使用它来构造其他资源的相对路径，例如图像或 CSS 文件：

$("#toggle").click(function() {
    if (left.width() > 0) {
        AnimateNav(left, right, 0);
        $(this).css("background", "url('"+ rootPath +"Images/filters_expand.jpg')");
    }
    else {
        AnimateNav(left, right, 170);
        $(this).css("background", "url('"+ rootPath +"Images/filters_collapse.jpg')");
    }
});

以上是如何正确处理外部 JavaScript 文件中的相对路径？的详细内容。更多信息请关注PHP中文网其他相关文章！