如何从 html 页面调用在 javascript 模块 (type=module) 中声明的函数答案

【问题标题】：How to call a function declared in a javascript module (type=module) from an html page如何从 html 页面调用在 javascript 模块 (type=module) 中声明的函数
【发布时间】：2021-11-08 18:07:10
【问题描述】：

我正在努力使用 javascript 模块...

我有一个 html 文件和一个 JS 模块。我在 javascript 文件中定义了一个函数，我想从我的 HTML 页面调用该函数。这是我的代码

index.html

<html>
<head>
  <script type="module" src="app.js"></script>
</head>
<body>
  <button onclick="greetFromHtml();">greetFromHtml</button>
  <button onclick="greetFromModule()"> greetFromModule</button>
  <script type="text/javascript">
    function greetFromHtml(){
      alert('Hello');
    }
  </script>
</body>
</html>

app.js

function greet(){
  alert('Hello');
}

greetFromHtml 按钮工作正常。当我单击 greetFromModule 按钮时，我收到此错误：hello is not defined at HTMLButtonElement.onclick

如果我从标题中删除type="module"，一切正常，但是由于其他原因我需要使用模块，所以这不是一个好的解决方案。

我看到一些帖子说我需要导入/导出或使用窗口，但我不知道该怎么做。请问有人可以提供答案吗？理想情况下，实现它的最简单方法

请参阅下面对我审查过的一些问题的参考：

function in my javascript module is not defined

Call functions in a JavaScript from an HTML

How to use code from script with type=module [duplicate]

ES6 Modules: Undefined onclick function after import

编辑我尝试了以下但仍然遇到相同的错误

编辑 2 答案中的代码正在运行。我只是想在本地运行，但我知道您需要一台服务器，所以如果您看到同样的错误，请将站点上传到服务器或使用本地服务器。

【问题讨论】：

标签： javascript html

【解决方案1】：

首先你必须明确导出你的函数：

export function greet() {
  alert("Hello from module");
}

其次，模块有它自己的作用域（这是模块的全部意义），因此您需要将函数添加到全局作用域。因此，要做到这一点，您必须运行一个脚本来导入该函数并将其添加到窗口对象：

<script type="module">
  import { greet } from "./app.js";
  window.greetFromModule = greet;
</script>

现在你不需要这部分了<script type="module" src="app.js"></script>

或者，您可以创建一个空的 obj 并将您的模块内容添加到其中，这就是它的样子：

<html>
  <head></head>
  <body>
    <button onclick="greetFromHtml();">greetFromHtml</button>
    <button onclick="module.greet()">greetFromModule</button>
    <script type="text/javascript">
      function greetFromHtml() {
        alert("Hello");
      }
      const module = {};
    </script>
    <script type="module">
      import { greet } from "./app.js";
      module.greet = greet;
    </script>
  </body>
</html>

【讨论】：

您好 mrdarkside 非常感谢您的回复，但我仍然遇到同样的错误。我已经复制并粘贴了您的代码，但它对我不起作用 - 也许我只是在这里遗漏了一些超级基本的东西......我在问题中添加了一些图片
嘿，在本地服务器上尝试一下，最简单的方法是将 Live Server 扩展安装到 VS 代码。您的浏览器认为您的文件来自不同的域 =)
您好，谢谢，我已将网站上传到服务器，它正在运行。非常感谢