如何在不修改 HTML 的前提下动态加载并使用外部 JavaScript 文件-html教程-PHP中文网

如何在不修改 HTML 的前提下动态加载并使用外部 JavaScript 文件

本文介绍在无法修改 HTML 中标签（如不能改用 type="module"）的前提下，通过动态创建 script 元素并监听 load 事件，安全、可靠地加载外部 JS 文件（如 init.js），并在其就绪后调用其中定义的函数（如 init()）。

本文介绍在无法修改 html 中 `<script>` 标签（如不能改用 `type="module"`）的前提下，通过动态创建 script 元素并监听 `load` 事件，安全、可靠地加载外部 js 文件（如 `init.js`），并在其就绪后调用其中定义的函数（如 `init()`）。</script>

在传统脚本环境中（即非 ES 模块、非构建工具场景），当主脚本（如 script.js）需依赖另一个独立 JS 文件（如 init.js）中定义的函数时，直接调用会因执行时序问题导致 ReferenceError: init is not defined。根本原因在于：document.head.appendChild(script) 是异步操作，而后续的 window.onload = init 在 init.js 尚未解析执行前就已注册，此时 init 函数尚未挂载到全局作用域。

正确的做法是将函数调用逻辑置于脚本加载完成之后。可通过为动态创建的 <script> 元素绑定 onload 事件实现：</script>

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

// 在 script.js 中添加以下代码
const initScript = document.createElement('script');
initScript.src = '../init.js';
initScript.type = 'text/javascript'; // 显式声明类型，增强兼容性

// ✅ 关键：在脚本加载并执行完毕后触发回调
initScript.onload = function () {
  console.log('init.js 已成功加载并执行');
  if (typeof init === 'function') {
    init(); // 此时 init 已可用
  } else {
    console.warn('警告：init 函数未在 init.js 中正确定义');
  }
};

// ⚠️ 注意：必须在设置 onload 后再 append，否则事件可能丢失
document.head.appendChild(initScript);

重要注意事项：

onload 事件仅在脚本下载完成且执行完毕后触发，确保 init.js 中的代码（包括 function init(){...}）已运行并挂载到全局作用域；
切勿在 onload 回调外直接调用 init()，也不要在 appendChild 之前设置 onload（部分浏览器可能忽略未挂载元素的事件监听）；
若需支持旧版 IE（
避免重复加载：可在加载前检查 window.init 是否已存在，或维护一个加载状态标记，防止多次 appendChild 引发重复执行；
路径 ../init.js 需确保相对于当前 HTML 文件的路径正确，建议统一使用绝对路径（如 /js/init.js）提升可维护性。

通过该方式，既满足了“不修改 HTML”的硬性约束，又实现了模块化拆分——init.js 可被多个脚本复用，消除代码冗余，同时保持执行时序的安全与可控。