本文介绍在无法修改 html 中 script 标签属性（如 type="module"）的限制下，通过原生 javascript 动态加载外部 js 文件，并确保其导出的函数（如 init()）在调用前已就绪的可靠方法。
本文介绍在无法修改 html 中 script 标签属性（如 type="module"）的限制下，通过原生 javascript 动态加载外部 js 文件，并确保其导出的函数（如 init()）在调用前已就绪的可靠方法。
在传统脚本环境中（尤其是 legacy 项目或受控部署场景），我们常遇到这样的约束：HTML 文件不可修改，主脚本（如 ../script.js）必须在不改动 <script src> 属性的前提下，调用另一个独立 JS 文件（如 ../init.js）中定义的函数（例如 init()）。此时，直接通过 document.createElement('script') 插入脚本虽能触发下载与执行，但若立即访问新脚本中声明的函数（如 window.onload = init），会因脚本尚未加载完成而报错 init is not defined——这是典型的<strong>竞态条件（race condition）。</script>
正确做法是利用 <script> 元素的 load 事件：该事件仅在脚本成功下载、解析并执行完毕后触发，此时其中声明的全局函数（如 function init(){...}）已挂载至 window 对象，可安全调用。</script>
以下是在 ../script.js 中推荐的实现方式：
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
// 动态加载 ../init.js 并确保 init() 可用
const script = document.createElement('script');
script.src = '../init.js';
script.async = true; // 推荐显式设置，强调非阻塞行为
// ✅ 关键：在 load 回调中使用 init()
script.onload = function () {
console.log('init.js 已加载完成，init 函数就绪');
// 此时 init() 一定已定义，可直接调用
init();
// 或绑定到其他生命周期钩子，例如：
// window.addEventListener('DOMContentLoaded', init);
// document.addEventListener('readystatechange', () => {
// if (document.readyState === 'complete') init();
// });
};
// ⚠️ 错误示例（勿用）：
// script.onload = init; // ❌ 不带括号是引用，但 init 尚未定义，会报错
// window.onload = init; // ❌ 此时 init 仍不存在，且会覆盖原有 onload
script.onerror = function () {
console.error('加载 ../init.js 失败，请检查路径或网络');
};
document.head.appendChild(script);
注意事项：
- ../init.js 中的 function init(){...} 必须为函数声明（而非函数表达式），才能被提升（hoisted）并在 onload 回调中直接访问；若改用 const init = () => {...}，需确保在 onload 中通过 window.init() 调用（因其不会被提升）。
- 路径 ../init.js 需与 ../script.js 的相对位置一致，建议统一使用根相对路径（如 /js/init.js）避免嵌套层级导致的路径错误。
- 若需多次加载或按需加载多个依赖，可封装为复用函数，并加入加载状态缓存，防止重复插入相同脚本。
此方案完全兼容 ES5+ 环境，无需模块化改造，也无需服务端配合，是解决“静态 HTML + 动态脚本协作”问题的经典、稳健实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
