如何从 html 页面调用 javascript 模块 (type=module) 中声明的函数
我正在努力使用 javascript 模块......
我有一个 html 文件和一个 JS 模块。我在 javascript 文件中定义了一个函数，我想从 HTML 页面调用该函数。这是我的代码
索引.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>
应用程序.js
function greet(){
alert('Hello');
}
greetFromHtml 按钮工作正常。当我单击greetFromModule按钮时，出现以下错误：hello is not defined at HTMLButtonElement.onclick
如果我type="module"从标头中删除，一切正常，但是由于其他原因我需要使用模块，所以这不是一个好的解决方案。
我看过几篇文章说我需要导入/导出或使用窗口，但我不知道该怎么做。请问有人可以提供答案吗？理想情况下，实现它的最简单方法
请参阅下面对我审查过的一些问题的参考：
编辑
我已尝试以下操作但仍然遇到相同的错误
编辑2 答案中的代码正在运行。我只是尝试在本地运行，但我知道您需要一台服务器，因此如果您看到相同的错误，请将站点上传到服务器或使用本地服务器。
mrd*_*ide 36
首先，您必须显式导出您的函数：
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>
| 归档时间： |
|
| 查看次数： |
25239 次 |
| 最近记录： |