如何从HTML页面调用JavaScript模块(type=module)中声明的函数

lnxxn5zx 于 2023-04-10 发布在 Java

关注(0)|答案(3)|浏览(542)

我正在努力使用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

编辑我已经尝试了以下操作，但仍然得到相同的错误x1c 0d1xx 1c 1d 1xx 1c 2d 1x
EDIT 2答案中的代码工作正常。我只是尝试在本地运行，但我知道你需要一个服务器，所以如果你看到同样的错误，上载网站到服务器或使用本地服务器。

JavaScript

来源：https://stackoverflow.com/questions/69888029/how-to-call-a-function-declared-in-a-javascript-module-type-module-from-an-htm

3条答案

按热度按时间

vhmi4jdf1#

首先，你必须显式地导出你的函数：

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>

赞(0）回复(0）举报 2023-04-10

aydmsdu92#

myscript.js

export const sampleFunction=()=>{
alert("Hello I'm sample");

}

index.js

import {sampleFunction} from './myscript.js';
window.sampleFunction=sampleFunction;

index.html

<script type='module' src='./index.js'></script>
<button onclick="sampleFunction()">Click me</button>

在script标签中，make script type = 'module' and src = './index.js'。现在它应该可以工作了。

赞(0）回复(0）举报 2023-04-10

s2j5cfk03#

你也可以尝试在你的html文档中重新排序你的引用。把你想调用的函数所在的模块放在调用它的模块之前。

赞(0）回复(0）举报 2023-04-10

我来回答

如何从HTML页面调用JavaScript模块(type=module)中声明的函数

3条答案

相关问题

热门标签

最新问答