有没有办法让我的 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

两件事情：请注意，所有元素<script>都应出现在结束元素之前的标记中</body>。在每个页面上，仅引用<script>该页面所需的内容例子：index.html<script&nbsp;src="main.js"></script> <script&nbsp;src="index.js"></script> </body> </html>project.html<script&nbsp;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&nbsp;&nbsp;&nbsp;&nbsp;<script>&nbsp;var&nbsp;page&nbsp;=&nbsp;"index"&nbsp;</script>把它放在第 1 行之前，因为我不知道哪一行可能会引起你的问题然后在index.js上用 if 语句包装你的代码（即放置 if 语句来检查页面是否=“索引”以防止不需要的代码在其他页面上运行例如：&nbsp;&nbsp;&nbsp;&nbsp;If&nbsp;(typeof&nbsp;page&nbsp;!==&nbsp;undefined&nbsp;&&&nbsp;page&nbsp;==&nbsp;"index")&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;allow&nbsp;code&nbsp;to&nbsp;execute &nbsp;&nbsp;&nbsp;&nbsp;}这是一个肮脏的 hack，但它可能会让你继续前进，直到你找到更有经验的工程师来调试你的代码......

Answer 3

例子：index.html 需要 main.js 和 index.js project.html 只需要 main.js 中的某个函数所以 main.jsfunction 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 中的项目。