在HTML/PHP中正确调用外部JavaScript文件中的函数

本教程详细阐述了在html或php文件中调用外部javascript函数时常见的错误及其正确解决方案。重点介绍了使用独立`<script>`标签加载外部文件后，再通过另一个`<script>`标签或利用`window.addeventlistener("load", ...)`事件监听器来安全、有效地执行<a style="color:#f60; text-decoration:underline;" title= "js"href="https://www.php.cn/zt/15802.html" target="_blank">js函数，确保代码按预期运行。</script>

在Web开发中，我们经常需要将JavaScript代码模块化到单独的文件中，以提高代码的可维护性和复用性。然而，在HTML或PHP文件中引入并调用这些外部JS文件中的函数时，新手开发者常会遇到一个普遍的误区。本教程将深入探讨这个常见错误，并提供两种推荐的正确调用方法。

理解常见的调用错误

许多开发者在尝试调用外部JavaScript文件中的函数时，可能会将函数调用代码直接放置在带有src属性的<script>标签内部，例如：

<script type="text/javascript" src="js/change.color.js">
    // 错误示范：在这里调用函数是无效的
    headerColor();
</script>

为什么这是错误的？

浏览器在解析HTML时，当遇到带有src属性的<script>标签时，它的行为是：

立即学习“PHP免费学习笔记（深入）”；

1. 加载外部文件： 浏览器会立即开始下载并执行src属性指定的外部JavaScript文件。
2. 忽略内部内容： 一旦src属性存在，浏览器就会完全忽略该<script>标签内部包含的所有文本内容（包括任何JavaScript代码或注释）。它不会执行这些内部代码。

因此，上述示例中的headerColor();调用永远不会被执行，即使js/change.color.js文件成功加载并定义了headerColor函数。

正确的调用方法

为了正确地调用外部JavaScript文件中的函数，我们需要确保在外部脚本加载并解析完成后再执行调用逻辑。以下是两种推荐的方法：

百度文心百中

百度大模型语义搜索体验中心

22

查看详情

方法一：使用独立的<script>标签

这是最直接且易于理解的方法。首先，使用一个<script>标签引入外部JavaScript文件，确保其内容被加载和解析。然后，在紧随其后的另一个独立的<script>标签中，编写需要执行的函数调用代码。

<!-- 步骤1：引入外部JavaScript文件 -->
<script type="text/javascript" src="js/change.color.js"></script>

<!-- 步骤2：在另一个独立的<script>标签中调用函数 -->
<script type="text/javascript">
    headerColor(); // 现在可以正确调用在change.color.js中定义的函数
</script>

原理： 浏览器会按顺序解析HTML。第一个<script>标签会加载并执行change.color.js，使其内部定义的headerColor函数在全局作用域中可用。当浏览器解析到第二个<script>标签时，headerColor函数已经存在，因此可以被成功调用。

方法二：利用事件监听器确保加载完成（推荐）

在许多情况下，我们希望在整个页面（包括所有HTML元素、图片等资源）加载完毕后再执行JavaScript函数，特别是当这些函数需要操作DOM元素时。使用window.addEventListener("load", ...)是一个健壮且常用的方法。

<!-- 步骤1：引入外部JavaScript文件 -->
<script type="text/javascript" src="js/change.color.js"></script>

<!-- 步骤2：在页面加载完成后调用函数 -->
<script type="text/javascript">
    // 确保在整个页面（包括所有资源）加载完毕后执行headerColor函数
    window.addEventListener("load", headerColor);
    // 或者使用匿名函数
    // window.addEventListener("load", function() {
    //     headerColor();
    // });
</script>

原理： window.addEventListener("load", ...)会等待整个页面的所有内容（包括图片、CSS、子框架等）都加载完成后才会触发其回调函数。这确保了当headerColor函数执行时，所有相关的DOM元素都已可用，避免了因元素未加载而导致的错误。

将事件监听器放置在外部JS文件中： 为了更好地组织代码，你甚至可以将事件监听器直接放置在外部JavaScript文件（js/change.color.js）内部。

// js/change.color.js
function init() { /* ... */ }
function changeBackgroundColor() { /* ... */ }
function changeTextBlackWhite() { /* ... */ }
function changeTiktokIconBlackWhite() { /* ... */ }

function headerColor() {
    init();
    changeBackgroundColor();
    changeTextBlackWhite();
}

function titleColor() {
    init();
    changeBackgroundColor();
    changeTextBlackWhite();
    changeTiktokIconBlackWhite();
}

// 将事件监听器放在外部JS文件内部
// 当此JS文件被加载并执行时，它会注册这个事件
window.addEventListener("load", headerColor);

这样，HTML文件中只需要引入一次外部JS文件即可，无需额外的<script>标签来触发函数。

注意事项

• DOMContentLoaded vs load：
  • DOMContentLoaded事件在HTML文档完全加载和解析完成后触发，无需等待样式表、图片等资源加载完成。如果你的JavaScript函数主要操作DOM且不依赖于所有资源加载，DOMContentLoaded可能更快。
  • load事件在整个页面（包括所有依赖资源）加载完成后触发。如果你的函数依赖于图片尺寸、外部字体等，load是更安全的选择。
• 脚本位置： 通常建议将<script>标签放在</body>标签之前，以确保HTML内容在脚本执行前已加载，从而避免阻塞页面渲染。
• 模块化： 对于更复杂的应用，可以考虑使用现代JavaScript模块（ESM）或模块打包工具（如Webpack、Rollup）来管理依赖和组织代码，提供更强大的功能和更好的性能优化。

总结

在HTML或PHP中调用外部JavaScript文件中的函数，关键在于理解浏览器对带有src属性的<script>标签的处理方式。避免在带有src的<script>标签内部直接编写执行代码。正确的做法是使用独立的<script>标签进行函数调用，或者更推荐地，利用window.addEventListener("load", functionName)或window.addEventListener("DOMContentLoaded", functionName)事件监听器来确保函数在页面适当的时机被执行，从而保证代码的健壮性和正确性。

以上就是在HTML/PHP中正确调用外部JavaScript文件中的函数的详细内容，更多请关注php中文网其它相关文章！