有没有办法让我的 JavaScript 文件不在 html 页面中运行？

Question

我有两个 html 文件（index.html和project.html），index.html包含或需要两个 javascript 文件（main.js和index.js）。main.js包含两个 html 文件所需的功能。而index.js具有只有index.html需要的功能。所以我说index.html-->( main.js,index.js ) 和 project.html-->( main.js)。问题是，当我打开 project.html 时，我在index.js中调用的 DOM 元素抛出错误，指出该元素为空。问题是导致错误的 DOM 元素仅在index.html而不是project.html中创建，但项目不应该调用或知道该函数。索引.html<script src="asset/javaScript/javaScript_for_index/main.js" defer type="module"></script> <script src="asset/javaScript/javaScript_for_index/index.js" defer type="module"></script>项目.html<script src="asset/javaScript/javaScript_for_index/main.js" defer type="module"></script>这是我在检查器中得到错误的地方。请注意，错误来自 project.html ，它是由index.js引起的我知道这有点令人困惑，但这是我能解释的最好的。

Answer 1

两件事情：

1. 请注意，所有元素<script>都应出现在结束元素之前的标记中</body>。

2. 在每个页面上，仅引用<script>该页面所需的内容

例子：

index.html

<script src="main.js"></script>
<script src="index.js"></script>
</body>
</html>

project.html

<script src="main.js"></script>
</body>
</html>

Answer 2

在我们做任何事情之前，先清除缓存。（重要的）

如果你确定你做的一切都是正确的，就像@Rounin 回答建议的那样，然后再次运行你的代码，检查以确保你的错误来自 index.js，如果是，那么你正在以某种方式将 index.js 注入页面不知道，（可能在你身体中间的某个地方或其他地方），你可能需要做一个比仅仅询问更彻底的调试。而且很可能您没有告诉我们所有事情，因为您可能没有意识到这一点。

尝试在您的 project.html 脚本中搜索任何出现的 index.js。(Ctrl+F)

现在，如果一切都失败了并且你必须快速前进，那么你可以在你的 index.html 和 index.js 脚本上尝试这个 hack。

索引.html

    <script> var page = "index" </script>

把它放在第 1 行之前，因为我不知道哪一行可能会引起你的问题

然后在index.js上用 if 语句包装你的代码（即放置 if 语句来检查页面是否=“索引”以防止不需要的代码在其他页面上运行

例如：

    If (typeof page !== undefined && page == "index") { 
            // allow code to execute
    }

这是一个肮脏的 hack，但它可能会让你继续前进，直到你找到更有经验的工程师来调试你的代码......

Answer 3

例子：

index.html 需要 main.js 和 index.js project.html 只需要 main.js 中的某个函数

所以 main.js

function functionsThatIndexNeeds() {

alert('Im in index.html!!!');

}

function functionsThatProjectNeeds() {

alert('IM IN PROJECTS~~~');

}

索引.html

<script>functionsThatIndexNeeds()</script>

项目.html

<script>functionsThatProjectNeeds</script>

关键是只调用每个 HTML 文件需要的函数。

告诉我这对你有用吗！:)

Answer 4

显然，您必须在 main.js 中引用 index.html 中的 DOM 部分。停止引用那些，你会没事的。请注意，如果我DIV在 index.html 中有foo一个 project.html 没有的 ID，那么您可以使用document.querySelectorAll()函数来检查该元素是否存在（可以查看length，从中返回，以及其他选项，例如undefined），并且如果它不存在则做出反应。这可以帮助您区分 index.html 和 project.html 中的项目。