从另一个 JS 文件访问 function 时出现问题

Question

我在从另一个文件访问 function 的 js 文件时遇到问题。

我在与 main.js 文件相同的路径中创建了一个名为“test.js”的新文件。

在 test.js 中我只有一个 function：

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

现在我想在 main.js 中调用这个 function。 在 main.js 中，我有代码，其中 append 是 test.js 的脚本标记。

var script = document.createElement('script');
script.type = 'module';
script.src = './test.js';    
document.head.appendChild(script);
console.log("head=",head.document)
HelloWorld();

在浏览器的控制台中，我可以看到脚本标签已成功添加到那里。

但是当我想调用 test.js function HelloWorld(); 它抛出一个期望，说"HelloWorld" is not defined 。

我在这里错过了什么？

Answer 1

你有两个问题：

1. 当前脚本还没有完成运行所以其他脚本不能运行所以不能及时创建 function
2. 另一个脚本作为模块加载，因此它创建的 function 无论如何都不会在全局 scope 中

正确使用模块，而不是尝试使用 DOM 和全局变量来伪造它们。

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

export default HelloWorld;

和

import HelloWorld from './test.js';
HelloWorld();

Answer 2

试试这个

const script = document.createElement("script");
    script.src = "./script.js";
    script.onload = () => {
      HelloWorld();
    };
    script.onerror = () => {
      console.log("Error occurred while loading script");
    };
    document.head.appendChild(script);