页面加载后如何在javascript中重新定义路径

Question

实际上，我有一个 HTML 网站，在 head 标签中我称之为 js 文件。 该网站有两个页面，所以真正的事情是在第一页中，javascript 中定义的路径工作得很好，但在第二个文件中，它没有......

文件夹根目录中的第一个文件，第二个在名为 HTML 的子文件夹中，js 文件位于主文件夹中的 JS 文件夹中。

这是来自JS的代码

function change() {
  document.getElementById("myDIV").className += (' toast-header-scrolled');
  document.getElementById("img").src = ("../Utilities/logo5.png");
  document.getElementById("name").style.visibility = "visible";
}

function back() {
  document.getElementById("myDIV").className = ('toast-header');
  document.getElementById("img").src = ("../Utilities/logo.png");
  document.getElementById("name").style.visibility = "hidden";
}

以及 HTML head 标签的代码

<script type="text/javascript" src="JS/addjs.js"></script>

从第二个文件

<script type="text/javascript" src="../JS/addjs.js"></script>

Answer 1

问题是路径是相对于你加载 JS 代码的文档。

"../Utilities/logo5.png"

不会在子文件夹中的第二个文件中使用正确的路径，因为第一个 html 文件所在的文件夹中没有“Utilities”文件夹。 为了工作，它需要是“../../Utilities/logo5.png”。

这里有两个快速解决方案：

1. 使用像“http://yourdomain.com/.../Utilities/logo5.png”这样的绝对路径链接到js代码中的img文件。
2. 在调用函数并更改 js 代码时使用变量，以便生成正确的相对路径。

编辑，为了更好地理解2：

function change(prePath) {
  document.getElementById("myDIV").className += (' toast-header-scrolled');
  document.getElementById("img").src = prePath + "../Utilities/logo5.png";
  document.getElementById("name").style.visibility = "visible";
}

并在子文件夹的第二个文件中使用 this 调用函数：

change("../")

采用

change("") 

在第一个文件中。

这是一个快速而肮脏的解决方案，还有其他方法可以确保完成此操作。 如果您想在位于其他子文件夹中的更多文件中使用它，您可以使用子文件夹的数量作为变量并运行一个循环，根据需要添加尽可能多的“../”。