如何正確處理外部 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中文網其他相關文章！