动态引入test.js模块后，main.js无法调用HelloWorld函数求助

API 探路者

2026-8-2

问题分析与解决方法

你遇到的问题主要由三个核心点导致，逐个拆解并给出解决办法：

1. ES模块的作用域隔离特性

你给动态创建的script标签设置了type="module"，这会让test.js以ES模块规则执行。ES模块的内部变量、函数默认是私有作用域，不会自动暴露到全局环境中，所以即使脚本加载完成，全局也访问不到HelloWorld函数。

解决：在test.js中导出函数
修改test.js代码：

export function HelloWorld(){
   console.log("hi user");
}

2. 动态脚本加载的异步性

你添加script标签后立刻调用HelloWorld()，但脚本从下载到解析执行需要时间，此时函数还未被定义，自然会抛出错误。必须等脚本加载完成后再执行调用逻辑。

解决：监听脚本的load事件，在回调中处理调用
结合模块导出的情况，修改main.js代码：

var script = document.createElement('script');
script.type = 'module';
script.src = './test.js';

// 监听脚本加载完成事件
script.onload = async function() {
  // 动态导入模块并获取导出的函数
  const { HelloWorld } = await import('./test.js');
  HelloWorld();
};

document.head.appendChild(script);
// 修正你代码里的笔误：head.document 应该是 document.head
console.log("head=", document.head);

如果不需要使用ES模块，也可以用更简单的方式（不推荐在复杂项目中使用）：

修改test.js，把函数挂载到全局对象：

function HelloWorld(){
   console.log("hi user");
}
// 将函数暴露到全局
window.HelloWorld = HelloWorld;

修改main.js，去掉type="module"并监听load事件：

var script = document.createElement('script');
script.src = './test.js';

script.onload = function() {
  HelloWorld();
};

document.head.appendChild(script);
console.log("head=", document.head);